100％宽的子元素未填充其容器

Question

我在HTML中制作带有可滚动主体的表格。我将ShellViewModel设置为<thead>，但在不同时间，它最终比display:table; width:100%的整个宽度短1或2个像素。

（a）为什么会发生这种情况？ （b）我如何解决它？

全屏运行代码段并调整浏览器窗口大小以便偶尔看到标题右侧出现黄色。

＆＃13;

＆＃13;

<table>

＆＃13;

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% }

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是浏览器的大小调整。在Chrome上显示空格。

您可以将thead的宽度增加到101%。将overflow:hidden;添加到table，空格应该消失。

这里的例子是：

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>

发生了什么事？ - 谷歌浏览器
以下是我在Google Chrome上可以看到的一些解释： thead的整数宽度没有小数位（总数）。但是具有display:flex;和flex-flow:column;的表格，表格的宽度具有两位小数的值。如果单个表格的宽度为248.75px，则thead的宽度为248px。浏览器（在本例中为Google Chrome）将thead宽度的值四舍五入为总数值。

要解决此问题，您必须将1px添加到内部元素（在本例中为thead）以在渲染时向上舍入宽度。现在，您必须在父元素上隐藏溢出overflow:hidden;。