Fixed table row width with Bootstrap

Question

I'm using bootstrap (link) on my site, but i'm a little bit confused about the using of tables. Before bootraps all my table TD cells had dynamic widths, so the TD had a bigger width if the content was a long sentence and smaller if it was only a 11 character long text input. But right now all my TD elements has the same width and I can't find the way, how 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 to have the "Data title X" cell have bigger width as the cell which has the input text field smaller. If I give them manually the style="width:xyzpx;" attribute it didn't change anything.

Can it be done somehow?

Solution 1

try to use the the span1, span2... span12 classes on table elements (or whereever needed, e.g. 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 is the jsFiddle

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

Solution 2

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

Also you might want to make your tables like below for a more valid markup:

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

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

Comments

[VORiAND]

I tried with the <td width="10%"> on the first TR of the table (all TD of the first TR), not working :(

[VORiAND]

oh, sorry. I added it to the third TR, because the first and second TR has colspan, could be this the problem?

[svenbravo7]

Yes that could be the problem. You must put the width's on the TR with the most TD elements.

[svenbravo7]

Post your exact table data for me, maybe something else is wrong.

[Leniel Maccaferri]

Amazing... What a solution to the problem! :/\ Thanks for sharing.

[khakiout]

@samuel, didn't realize it was this simple. thanks :)