jquery - Force each row in bootstrap table to be a one-liner when table is wider than screen -
i building dynamic table consists of 1-50 columns depending user selects. when user selects 1-6 colums there no problem showing data on screen (see ex.1) when user selects more 6 columns table tries squeeze view on screen resulting in each row being expanded multiple lines (see ex.2).
the column width not defined varies depending on text show.
how can make sure row one-liner ex.1 no matter how many columns user selects?
i have jsfiddle demo code:
<table class='table'> <thead> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> <th>column 4</th> <th>column 5</th> <th>column 6</th> </tr> </thead> <tbody> <tr> <td>row 1</td> <td>row 11</td> <td>row 11 1</td> <td>row 11 11</td> <td>row 11 11 1</td> <td>row 11 11 11</td> </tr> <tr> <td>row 2</td> <td>row 22</td> <td>row 22 2</td> <td>row 22 22</td> <td>row 22 22 2</td> <td>row 22 22 22</td> </tr> </tbody> </table>
try adding css table elements: white-space: nowrap
jsfiddle
Comments
Post a Comment