如何强制表格宽度等于其子td宽度并允许表格扩展到视口宽度之外

Question

我有一个带有动态行+列的表。

<table>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
</table>

我想让td宽度始终等于其内容。 此刻，表格宽度根据td宽度扩展。 但是，一旦列数增加，表的总宽度就受到页面宽度的限制。

我正在尝试找到一种方法来保持auto td宽度，但允许表扩展到页面宽度之外。 我附上了我下面的意思的简单图纸：

提前致谢！

Answer 1

添加此样式：

table {
  white-space: nowrap;  //prevent wrapping
}

小提琴