-2

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

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

更新：我想创建一个具有以下要求的表： 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>

4

1 回答 1

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 {
  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%表格，然后就可以了：

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>

于 2020-05-10T17:33:40.027 回答