html - 如何使 html 表格故意超出其容器的宽度？

Question

Demo

我正在尝试制作一个包含水平滚动条的表格，其中任何单个行的宽度都可以设置为我想要的任何宽度。我尝试了两种不同的方法来实现这一点，但它们都给我带来了问题:

如果我为表格分配的宽度大于其包含的 div 并应用 overflow-x: scroll，则表格会超出其容器的宽度。但是，我无法控制单元格的宽度。设置 td{width:'x'px;} 没有任何作用。

如果我将 table-layout:fixed 应用于表格，我现在可以调整各行的宽度但不能超过表格容器的宽度。

我如何才能两全其美？我需要表格超过容器的宽度才能获得滚动条，同时还能够将不同行的宽度设置为任意值。

Answer 1

HTML 表格和表格单元格设计成这种方式 - 单元格将始终限制在表格的宽度内。如果你想像对待普通内联 block 元素一样调整它们的大小，你可以:

1. 使用<div class="table">和 <div class="cell">标记和样式表。

或

1. 更改 CSS 中的显示模式。 {display: block}对于表格，{display: inline-block}对于细胞。您可能还需要摆弄其他元素的显示模式，例如 <tr> , <th> , <thead> , <tbody> ...

注意事项:以防万一您使用表格作为布局页面内容的方式，请停止并认真重新考虑改变您的方法。表格是布局的一个讨厌的拐杖，实际上应该只用于显示实际的表格数据。