在容器内的表格单元格中添加水平滚动条

Question

我的<div class="container">里面有<table class="table">，看起来不错。在细胞变宽之前，表格会扩展到内容的完整大小。

<div class="container">
    <table class="table">
        <tr>
            <td>Caption</td>
            <td>Some very long string that makes the contents to overflow, actually mich like this actual example in StackOverflow.
            </td>
        </tr>
    </table>
</div>

当内容比容器宽时，我想要一个水平滚动条（实际上就像StackOverflow那样......）。

我该怎么做？在style="overflow-x: scroll"上添加<td>并不做任何事情。

Answer 1

1. 授予.container一个max-width。
2. 然后将overflow样式规则应用于.container。

示例：

.container {
max-width: 400px;
overflow-x: scroll;
}