在容器內的表格單元格中添加水平滾動條

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 a max-width。
2. 然後將overflow樣式規則應用到.container。

例子：

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