将表格列的宽度设置为内容大小？或设置特定的宽度px？

Question

我使用的是Bootstrap 3，目前有一张包含约12列的表格。我希望表格可以水平滚动。出于某种原因，它使列变得非常小，因此内容被堆叠了。有什么办法可以解决此问题？我尝试过更改th元素的宽度，但是却无济于事。

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      ......
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      .......
    </tr>
  </tbody>
</table>

Answer 1

尝试

<div class="table-responsive">

Answer 2

最后通过在TH和TR元素上添加white-space: nowrap;来解决此问题，以使列将仅是内容的大小。