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

Question

I have a table with dynamic row + column.

<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>

I'd like to have the td width to always equal to its content. At the moment, the table width expands according to the td width. However, the total table width is constrained by the page width once the number of column increases.

I'm trying to find a way to maintain the auto td width but allow the table to expand beyond the page width. I attached a simple drawing of what I meant below:

Thanks in advance!

Answer 1

Add this style:

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

Fiddle