Table 单元格在小屏幕上重叠

Question

https://dev.meteo.cam/pricing 上 table 上的单元格在小屏幕上重叠：

当然，这个 table 有点特别，因为我改变了样式，tbody 变成了垂直滚动。

然而，令人困惑的是下面的代码示例使用相同的 CSS 样式：

table.table-complex {
  width: 200px;
  /*added only for this snippet to simulate small screens*/
}

table.table-complex tbody {
  display: block;
  max-height: calc(100vh - 100px);
  overflow: auto;
}

table.table-complex tbody tr,
table.table-complex thead {
  border-bottom: 1px solid #ccc;
  display: table;
  table-layout: fixed;
  white-space: normal;
  width: 100%;
}

<table class="table-complex">
  <thead>
    <tr>
      <th>Webcam</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>FTP upload <small>(up to every 5 min)</small><sup>1</sup></td>
      <td><b>free</b></td>
    </tr>
    <tr>
      <td>RapidFire FTP upload: <small>(up to every 5 sec)</small><sup>1</sup></td>
      <td><b>USD 0.99</b> <small>/month</small></td>
    </tr>
    <tr>
      <td>Archive <small>(10 years)</small><sup>2</sup></td>
      <td><b>USD 1.99</b> <small>/month</small></td>
    </tr>
  </tbody>
</table>

为什么上面的示例可以工作，但在 https://dev.meteo.cam/pricing 小屏幕上却不行？

PS：当我通过 Chrome Inspector 在 https://dev.meteo.cam/pricing 上插入 CSS 时，它也有效！

Answer 1

我在浏览器中检查过，table.table-complex td 有一个 white-space:nowrap 样式元素。这导致了您遇到的问题。它是 tags.css 文件的一部分。

Table 单元格在小屏幕上重叠

Table Cells Overlapp on Small Screens

css

whitespace

html-table

tablelayout