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

table examples

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

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -