Question

我对网站上的表格行为有以下要求：

单元格永远不会显示任何明确的宽度，我会根据内容
整个表格的宽度绝不应超过100％
在某些边缘情况下，即使使用强制最大宽度和表格换行，总宽度仍可能超过100％（例如在移动设备上）。在这种情况下，我希望表格宽度为100％，水平滚动。

要完成上述操作，请查看此JSBin。

HTML：

<table>
    <thead>
    <tr>
    <th>Column one</th>
    <th>Column two</th>
    <th>Column three</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1.1</td>
    <td>2.1</td>
    <td>3.1</td>
    </tr>
    <tr>
    <td>1.2</td>
    <td>2.2</td>
    <td>3.2</td>
    </tr>
    <tr>
    <td>1.3</td>
    <td>2.3</td>
    <td>3.3</td>
    </tr>
    </tbody>
  </table>

CSS：

table {
    display: block;
    table-layout: fixed;
    overflow-x: scroll;
    max-width:100%;
    background-color: #697A09 !important;
}

th, td {
    padding: 10px;
    background-color:white;
    width:auto;
}

这种设置背后的思考：表的max-width仅在表设置为display：block时有效。边缘情况（小视口）的水平滚动是使用overflow-x结合表格布局完成的：固定。

这满足了我的要求，但有一个意想不到的问题：使用display：block会使表本身使用100％的宽度。然而，单元格似乎没有遵循100％，结合它们占据了表格宽度的不到100％，因为我试图在示例中使用不同的背景颜色突出显示。

我基本上想要的是让表总是占据它所在的任何父元素的100％，并且让单元格分布在100％，而不显式设置它们的宽度。

这样的事情可能吗？

Answer 1

代码可能会有所帮助，如下所示：

table {
    overflow-x: scroll;
    max-width:100%;
    background-color: #697A09 !important;
    width: 100%;
}

    th, td {
    padding: 10px;
    background-color:white;
    width:auto;
}

如何让表格单元格自动占据表格布局的100％宽度：固定？

1 个答案: