如何在Chrome中以100％的宽度显示表格

Question

I am debugging and extending an express app that displays a data set in a series of nested tables on a page. Originally, all of the CSS was in style tags in the head tag of the HTML file and the tables displayed fine across 100% of the width of the page. When the CSS was on the same page it worked and this is the CSS being used to govern the width of the element we are trying to display:

li.dir span {
    color: black;
    cursor: auto;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
    width: 100%;
}

Now that I have taken off the style tags and moved the CSS to its own file, the width:100% style does not display.

I have inspected the element in question inside of DevTools and when I look at the li.dir span class, Chrome and IE both eliminate the width:100% attribute.

I know that width is governed by the parent element so I have tried adding the style=width:100% property to each of the parent elements in order to try to brute force this particular style attribute but I still cant seem to find where to make this particular CSS property work.

Here is the parent div that governs where the table is created in my body:

<div id="url"></div>
<div class="create"></div>

The issue I have found has to do with the fact that the app is inserting DOM elements dynamically. Somehow, Chrome is adding a style="display: inline-block attribute to an anchor tag that is acting as the parent to my table data. The problem is that I cannot find where this is being added because when I change the only place in my HTML file with this attribute to width:100% it still appears.

My guess is that display:inline-block is being inherited from bootstrap, but that's just a guess.

Here is my code dealing with the insertion of the parent element. As you can see, I am trying to eliminate the display: inline-block in order to have width:100%. I don't have display: inline-block in my code, but yet it is being added somehow by default. How do I get rid of it? Take a look at my code:

table += 
'<ul>' + 
    '<li class="dir" id="' + title + '">' + 

         // This is the anchor tag in question
        '<a id="' + title + 'focus" style="width: 100%;"></a>' + 
        title + 
        '<span>' + 
            '<ul>' + 
                '<li id=\"' + title + "Table" + '\"></li>' + 
            '</ul>' + 
        '</span>' + 
    '</li>' + 
'</ul>';
}
tabobj.push(title);

Here is what it looks like in DevTools:

Why would it work in my class when it's in a style tag in the same HTML file but not in a separate CSS file?

Also, how do I get rid of that display:inline-block setting that Chrome and IE seem to be adding by default????

Please let me know if you can help me on this one and thanks!

Here is a link to the project on codePen: https://codepen.io/lopezdp/pen/GEzwmP

Answer 1

So I tracked it down and started trying different solutions and I was able to solve it.

Thanks for the help in figuring out what direction to take. The folowing anchor tag shows what I changed to my HTML in order to solve this issue:

'<a id="' + title + 'focus" style="width: 100%; display: none; overflow: auto;"></a>'