Fixed table row width using Bootstrap

Question

I use bootstrap ( link ) on my site, but I'm a little confused about using tables. Before loading, all of my TD cell tables had dynamic width, so TD had a larger width if the content was a long sentence and less if it was just 11-character text input. But right now, all my TD elements are the same width, and I cannot find a way to change this ...

This is my table:

<table id="table1" style="padding-top:10px;"> <tr> <td colspan="6" style="text-align:center;">TITLE</td> </tr> <tr> <td colspan="3" style="text-align:center;">SUBTITLE 1</td> <td colspan="3" style="text-align:center;">SUBTITLE 2</td> </tr> <tr> <td style="text-align:left;"><b>A.</b></td> <td>Data title 1</td> <td><input type="text" maxlength="11" size="11" name="input_a"></td> <td style="text-align:left;"><b>D.</b></td> <td>Data title 2</td> <td><input type="text" maxlength="11" size="11" name="input_b"></td> </tr> ... </table> 

So, I want the "Data title X" cell to have a larger width as a cell with an input field smaller. If I give them manually style = "width: xyzpx;" the attribute has not changed anything.

How can I do that?

Answer 1

try using the span1, span2 ... span12 classes on table elements (or, if necessary, for example, inputs):

 <table id="table1"> <thead> <tr> <th colspan="6">TITLE</th> </tr> <tr> <th colspan="3">SUBTITLE 1</th> <th colspan="3">SUBTITLE 2</th> </tr> </thead> <tr> <td class='span1'><b>A.</b> </td> <td class='span4'>Data title 1</td> <td class='span1'> <input type="text" maxlength="11" size="11" name="input_a" class="span1" /> </td> <td class='span1'><b>D.</b> </td> <td class='span4'>Data title 2</td> <td class='span1'> <input type="text" maxlength="11" size="11" name="input_b" class="span1" /> </td> </tr> </table> 

here jsFiddle

ps: there is a class prefix col - (col-4, col-lg-4 ...) in bootstrap3

Answer 2

Using <td width="10%"> works for me on Twitter bootstrap. Or you can add a class to td and set the width in the stylesheet td.column{ width: 10% !important;}

You can also make your tables, as shown below, for more correct layout:

 <table> <thead> <tr> <td>Title 1</td> ... </tr> </thead> <tbody> <tr> <td></td> ... </tr> </tbody> </table> 

Add width properties to <tr> with all 6 <td> elements.