html - 100% 宽的子元素没有填满它的容器

Question

我正在用 HTML 制作带有可滚动正文的表格。我有 <thead>设置为 display:table; width:100% , 但在不同的时间它最终会比 <table> 的全宽少 1 或 2 个像素。 .

(a) 为什么会这样？
(b) 我该如何解决？

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

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>

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; overflow hidden 。