由于父元素的 box-sizing 属性，删除空白 Space

Question

我正在创建一个 table 并且我已经使用 box-sizing: border-box; 属性作为其父元素 body。对于某些屏幕分辨率，我在 Chrome 右侧看到一条垂直红线（尝试放大和缩小以查看它）。我想摆脱这条红线。

当我从 body 中删除 box-sizing: border-box; 属性时，它工作正常。但它改变了其他元素的外观。有没有办法摆脱它。

更新：我想创建一个具有以下要求的 table： 1.响应式设计即水平滚动而不是换行或溢出。 2.宽度100%。 3. 盒子阴影。 4. 不扭曲其他元素

这是我的代码：

body {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.87);
  font: 400 1rem 'Roboto', sans-serif;
  margin: 2vh auto;
  min-height: 96vh;
  padding: 40px;
  width: 72vw;
}

table {
  background-color: red;
  border-collapse: collapse;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: block;
  overflow-x: auto;
}

tbody {
  background-color: blue;
  display: table;
  width: 100%;
}

tr:not(:first-child):hover {
  background-color: #F5F5F5/* [Gray -> 200] */
}

th {
  color: #616161;
  /* [Gray -> 700] */
  font-size: 0.9rem;
  padding: 16px;
  text-align: left;
}

td {
  border-top: 1px solid #E0E0E0;
  /* [Gray -> 300] */
  padding: 8px 16px;
}

<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Field</th>
      <th>Class</th>
    </tr>
    <tr>
      <td>Mansoor</td>
      <td>Science</td>
      <td>XI-B</td>
    </tr>
    <tr>
      <tr>
        <td>Manny</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Science</td>
        <td>XI-C</td>
      </tr>
  </table>
</body>

Answer 1

这是一个有趣的案例。首先，我想说这是一个怪癖，因为在语义上错误地使用了样式：这些位

table {
  display: block;
}
tbody {
  display: table;
}

没有意义，你为什么要用它？

我稍微调整了一下并创建了一个 MCVE：

table {
  display: block;
  background-color: red;
}

tbody {
  display: table;
  width: 100%;
  background-color: #ccffff;
}

<table>
  <tr>
    <td>test</td>
  </tr>
</table>

在 Chrome 中放大和缩小时，您可能会看到右侧的垂直红线。

正如我们所见，display: table; width: 100%; 元素位于 display: block 元素内部时，浏览器无法准确计算其宽度。为了说明这是问题的根源，请考虑另外 2 个片段：

.table {
  background-color: red;
  display: block;
}

.tbody {
  background-color: #ccf8ff;
  display: table;
  width: 100%;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
}

<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td">test</div>
    </div>
  </div>
</div>

这是您修改后 "table" 的结构。该单元格实际上没有发挥任何作用，这仍然重现了问题：

.table {
  background-color: red;
  display: block;
}
.tbody {
  background-color: #ccf8ff;
  display: table;
  width: 100%;
}

<div class="table">
  <div class="tbody">
    test
  </div>
</div>

我认为这可能被认为是一个浏览器错误，但由于这种结构在语义上是错误的，所以你不能真正将其称为错误，因为规范可能没有说明任何问题。

只需删除那些 display 规则并将 width: 100% 移至 table，然后开始：

body {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.87);
  font: 400 1rem 'Roboto', sans-serif;
  margin: 2vh auto;
  min-height: 96vh;
  padding: 40px;
  width: 72vw;
}

table {
  background-color: red;
  border-collapse: collapse;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow-x: auto;
  width: 100%;
}

tbody {
  background-color: blue;
}

tr:not(:first-child):hover {
  background-color: #F5F5F5/* [Gray -> 200] */
}

th {
  color: #616161;
  /* [Gray -> 700] */
  font-size: 0.9rem;
  padding: 16px;
  text-align: left;
}

td {
  border-top: 1px solid #E0E0E0;
  /* [Gray -> 300] */
  padding: 8px 16px;
}

<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Field</th>
      <th>Class</th>
    </tr>
    <tr>
      <td>Mansoor</td>
      <td>Science</td>
      <td>XI-B</td>
    </tr>
    <tr>
      <tr>
        <td>Manny</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Science</td>
        <td>XI-B</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Science</td>
        <td>XI-C</td>
      </tr>
  </table>
</body>

由于父元素的 box-sizing 属性，删除空白 Space

Get Rid Of Blank Space due to box-sizing property of parent element

css

box-sizing