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

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 一样......）。

我该怎么做？在<td> 上添加style="overflow-x: scroll" 没有任何作用。

Answer 1

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

示例：

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