CODEWITHSUNDEEP
htmlcss
Phrogz
Phrogz

Reputation: 303198

100% wide child element is not filling its container

I'm making tables with scrollable body in HTML. I have the <thead> set to display:table; width:100%, but at varying times it ends up being 1 or 2 pixels short of the full width of the <table>.

table with yellow background and grey header, with yellow seen to right of header

(a) Why is this happening?
(b) How do I work around it?

Run the code snippet full screen and resize your browser window to see yellow appear to the right of the header occasionally.

body { background:#666; display:flex }
table {
    display:flex; flex-flow:column; 
    margin-right:10px; height:120px;
    background:#ff3;
}
thead {
  flex:0 0 auto;
  width:100%;
  background:#999;
}
thead, tbody tr { display:table; table-layout:fixed }
th { text-align:left }
tbody { flex:1 1 auto; display:block; overflow-y:auto }
tbody tr { width:100% }
<table>
  <thead><tr><th>title</th><th>artist</th></tr></thead>
  <tbody>
    <tr><td>No Ordinary Morning</td><td>Chicane</td></tr>
    <tr><td>From Where I Stand</td><td>Chicane</td></tr>
    <tr><td>Come Back</td><td>Chicane</td></tr>
    <tr><td>Offshore</td><td>Chicane</td></tr>
    <tr><td>Don't Give Up (feat. Bryan Adams)</td><td>Chicane</td></tr>
    <tr><td>Spirit (Chicane Rework Mix) [feat. Jewel]</td><td>Chicane</td></tr>
    <tr><td>Halcyon</td><td>Chicane</td></tr>
    <tr><td>Sunstroke</td><td>Chicane</td></tr>
    <tr><td>Stoned In Love (feat. Tom Jones)</td><td>Chicane</td></tr>
    <tr><td>Wake Up (feat. Keane)</td><td>Chicane</td></tr>
    <tr><td>Come Tomorrow</td><td>Chicane</td></tr>
    <tr><td>Leaving Town (feat. Salt Tank)</td><td>Chicane</td></tr>
  </tbody>
</table>

<table>
  <thead><tr><th>title</th><th>artist</th></tr></thead>
  <tbody>
    <tr><td>No Ordinary Morning</td><td>Chicane</td></tr>
    <tr><td>From Where I Stand</td><td>Chicane</td></tr>
    <tr><td>Come Back</td><td>Chicane</td></tr>
    <tr><td>Offshore</td><td>Chicane</td></tr>
    <tr><td>Don't Give Up (feat. Bryan Adams)</td><td>Chicane</td></tr>
    <tr><td>Spirit (Chicane Rework Mix) [feat. Jewel]</td><td>Chicane</td></tr>
    <tr><td>Halcyon</td><td>Chicane</td></tr>
    <tr><td>Sunstroke</td><td>Chicane</td></tr>
    <tr><td>Stoned In Love (feat. Tom Jones)</td><td>Chicane</td></tr>
    <tr><td>Wake Up (feat. Keane)</td><td>Chicane</td></tr>
    <tr><td>Come Tomorrow</td><td>Chicane</td></tr>
    <tr><td>Leaving Town (feat. Salt Tank)</td><td>Chicane</td></tr>
  </tbody>
</table>

<table>
  <thead><tr><th>title</th><th>artist</th></tr></thead>
  <tbody>
    <tr><td>No Ordinary Morning</td><td>Chicane</td></tr>
    <tr><td>From Where I Stand</td><td>Chicane</td></tr>
    <tr><td>Come Back</td><td>Chicane</td></tr>
    <tr><td>Offshore</td><td>Chicane</td></tr>
    <tr><td>Don't Give Up (feat. Bryan Adams)</td><td>Chicane</td></tr>
    <tr><td>Spirit (Chicane Rework Mix) [feat. Jewel]</td><td>Chicane</td></tr>
    <tr><td>Halcyon</td><td>Chicane</td></tr>
    <tr><td>Sunstroke</td><td>Chicane</td></tr>
    <tr><td>Stoned In Love (feat. Tom Jones)</td><td>Chicane</td></tr>
    <tr><td>Wake Up (feat. Keane)</td><td>Chicane</td></tr>
    <tr><td>Come Tomorrow</td><td>Chicane</td></tr>
    <tr><td>Leaving Town (feat. Salt Tank)</td><td>Chicane</td></tr>
  </tbody>
</table>

<table>
  <thead><tr><th>title</th><th>artist</th></tr></thead>
  <tbody>
    <tr><td>No Ordinary Morning</td><td>Chicane</td></tr>
    <tr><td>From Where I Stand</td><td>Chicane</td></tr>
    <tr><td>Come Back</td><td>Chicane</td></tr>
    <tr><td>Offshore</td><td>Chicane</td></tr>
    <tr><td>Don't Give Up (feat. Bryan Adams)</td><td>Chicane</td></tr>
    <tr><td>Spirit (Chicane Rework Mix) [feat. Jewel]</td><td>Chicane</td></tr>
    <tr><td>Halcyon</td><td>Chicane</td></tr>
    <tr><td>Sunstroke</td><td>Chicane</td></tr>
    <tr><td>Stoned In Love (feat. Tom Jones)</td><td>Chicane</td></tr>
    <tr><td>Wake Up (feat. Keane)</td><td>Chicane</td></tr>
    <tr><td>Come Tomorrow</td><td>Chicane</td></tr>
    <tr><td>Leaving Town (feat. Salt Tank)</td><td>Chicane</td></tr>
  </tbody>
</table>

Upvotes: 3

Views: 56

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

The problem is the resize of the browser. On Chrome the space appears.

You have the possibility to increase the width of thead to 101%. Add overflow:hidden; to table and the space should be disappear.

Here the example:

body { background:#666; display:flex }
table {
    display:flex; 
    flex-flow:column; 
    margin-right:10px; height:120px;
    background:#ff3;
    overflow:hidden /** add this to hide the overflow of the thead. */;
}
thead {
  flex:0 0 auto;
  width:101% /** change from 100% to 101% */;
  background:#999;

}
thead, tbody tr { display:table; table-layout:fixed }
th { text-align:left }
tbody { flex:1 1 auto; display:block; overflow-y:auto }
tbody tr { width:100% }
<table>
  <thead><tr><th>title</th><th>artist</th></tr></thead>
  <tbody>
    <tr><td>No Ordinary Morning</td><td>Chicane</td></tr>
    <tr><td>From Where I Stand</td><td>Chicane</td></tr>
    <tr><td>Come Back</td><td>Chicane</td></tr>
    <tr><td>Offshore</td><td>Chicane</td></tr>
    <tr><td>Don't Give Up (feat. Bryan Adams)</td><td>Chicane</td></tr>
    <tr><td>Spirit (Chicane Rework Mix) [feat. Jewel]</td><td>Chicane</td></tr>
    <tr><td>Halcyon</td><td>Chicane</td></tr>
    <tr><td>Sunstroke</td><td>Chicane</td></tr>
    <tr><td>Stoned In Love (feat. Tom Jones)</td><td>Chicane</td></tr>
    <tr><td>Wake Up (feat. Keane)</td><td>Chicane</td></tr>
    <tr><td>Come Tomorrow</td><td>Chicane</td></tr>
    <tr><td>Leaving Town (feat. Salt Tank)</td><td>Chicane</td></tr>
  </tbody>
</table>

<table>
  <thead><tr><th>title</th><th>artist</th></tr></thead>
  <tbody>
    <tr><td>No Ordinary Morning</td><td>Chicane</td></tr>
    <tr><td>From Where I Stand</td><td>Chicane</td></tr>
    <tr><td>Come Back</td><td>Chicane</td></tr>
    <tr><td>Offshore</td><td>Chicane</td></tr>
    <tr><td>Don't Give Up (feat. Bryan Adams)</td><td>Chicane</td></tr>
    <tr><td>Spirit (Chicane Rework Mix) [feat. Jewel]</td><td>Chicane</td></tr>
    <tr><td>Halcyon</td><td>Chicane</td></tr>
    <tr><td>Sunstroke</td><td>Chicane</td></tr>
    <tr><td>Stoned In Love (feat. Tom Jones)</td><td>Chicane</td></tr>
    <tr><td>Wake Up (feat. Keane)</td><td>Chicane</td></tr>
    <tr><td>Come Tomorrow</td><td>Chicane</td></tr>
    <tr><td>Leaving Town (feat. Salt Tank)</td><td>Chicane</td></tr>
  </tbody>
</table>

<table>
  <thead><tr><th>title</th><th>artist</th></tr></thead>
  <tbody>
    <tr><td>No Ordinary Morning</td><td>Chicane</td></tr>
    <tr><td>From Where I Stand</td><td>Chicane</td></tr>
    <tr><td>Come Back</td><td>Chicane</td></tr>
    <tr><td>Offshore</td><td>Chicane</td></tr>
    <tr><td>Don't Give Up (feat. Bryan Adams)</td><td>Chicane</td></tr>
    <tr><td>Spirit (Chicane Rework Mix) [feat. Jewel]</td><td>Chicane</td></tr>
    <tr><td>Halcyon</td><td>Chicane</td></tr>
    <tr><td>Sunstroke</td><td>Chicane</td></tr>
    <tr><td>Stoned In Love (feat. Tom Jones)</td><td>Chicane</td></tr>
    <tr><td>Wake Up (feat. Keane)</td><td>Chicane</td></tr>
    <tr><td>Come Tomorrow</td><td>Chicane</td></tr>
    <tr><td>Leaving Town (feat. Salt Tank)</td><td>Chicane</td></tr>
  </tbody>
</table>

<table>
  <thead><tr><th>title</th><th>artist</th></tr></thead>
  <tbody>
    <tr><td>No Ordinary Morning</td><td>Chicane</td></tr>
    <tr><td>From Where I Stand</td><td>Chicane</td></tr>
    <tr><td>Come Back</td><td>Chicane</td></tr>
    <tr><td>Offshore</td><td>Chicane</td></tr>
    <tr><td>Don't Give Up (feat. Bryan Adams)</td><td>Chicane</td></tr>
    <tr><td>Spirit (Chicane Rework Mix) [feat. Jewel]</td><td>Chicane</td></tr>
    <tr><td>Halcyon</td><td>Chicane</td></tr>
    <tr><td>Sunstroke</td><td>Chicane</td></tr>
    <tr><td>Stoned In Love (feat. Tom Jones)</td><td>Chicane</td></tr>
    <tr><td>Wake Up (feat. Keane)</td><td>Chicane</td></tr>
    <tr><td>Come Tomorrow</td><td>Chicane</td></tr>
    <tr><td>Leaving Town (feat. Salt Tank)</td><td>Chicane</td></tr>
  </tbody>
</table>

What is happening? - Google Chrome
Here a little explanation what i can see on Google Chrome: The thead has a integer width without a decimal place (a total number). But the table with display:flex; and flex-flow:column;, the width of the table has a value with a two decimal place. If a single table has a width of 248.75px the thead has a width of 248px. The browser (in this case Google Chrome) round off the value of the width of thead to a total number value.

To solve this problem you have to add 1px to the inner element (in this case thead) to round up the width on rendering. Now you have to hide the overflow with overflow:hidden; on the parent element.

Upvotes: 2

Related Questions