javascript - How to force table width to equal to its child td width and allow table to extend beyond viewport width -

i have table 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 have td width equal content. @ moment, table width expands according td width. however, total table width constrained page width once number of column increases.

i'm trying find way maintain auto td width allow table expand beyond page width. attached simple drawing of meant below:

thanks in advance!

add style:

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

fiddle