表格细胞在小屏幕上重叠

Question

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

当然，这个表有点特别，因为我改变了样式，使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

我在浏览器中查看了它，import scala.concurrent.duration._ val executionTime = 2 hours val authTimeout = 10 minutes val safetyMargin = 30 seconds val authenticate : ChainBuilder = exec(login) .exec(session => session.set("timeout", authTimeout.fromNow)) scn = scenario("scenarioXYZ") .exec(authenticate) .during(executionTime) { doIf(session => {session.get("timeout").as[Deadline].timeleft <= safteyMargin}) { exec(authenticate) } .exec(requestX) .exec(requestY) .exec(requestZ) } } 有一个table.table-complex td样式元素。这导致了你遇到的问题。它是white-space:nowrap文件的一部分。