上的表格单元格
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:当我在上插入CSS时
https://dev.meteo.cam/pricing
通过Chrome Inspector,它也可以工作!
