how to align my td's with equal width?

Question

this is my html code:http://jsfiddle.net/Udxyb/427/

in the below code..Under each of these columns(section1, section2, section3, section4) i want two equal columns and these columns with should not vary if the input data is lenghty. instead the width of both columns must remain the same rather than increase.is it possible???

<table id="main_table" style="width:100%">
    <thead>
        <tr class="firstline">
            <th colspan="2">Column1</th>
            <th colspan="2">Column2</th>
            <th colspan="2">Column3</th>
            <th colspan="2">Column4</th>
        </tr>
    </thead>
    <tbody>
        <tr style="width:1002px; background-color:green; color:white">
            <td  colspan="2" class="flip" style="width:250px;"> Section 1 </td>
              <td  colspan="2" class="flip" style="width:250px;"> Section 1 </td>
             <td  colspan="2" class="flip" style="width:250px;"> Section 1 </td>
             <td  colspan="2" class="flip" style="width:250px;"> Section 1 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td style="width:125px;">item 111sdfgadgrfag</td>
            <td>item 112</td>
            <td>item 113</td>
            <td>item 114</td>
            <td>item 115</td>
            <td>item 116</td>
            <td>item 117</td>
            <td>item 118dfgdfgdfgdfgg</td>
      </tr>
        <tr>
            <td colspan="2">item 121</td>
            <td colspan="2">item 122</td>
            <td colspan="2">item 123</td>
            <td colspan="2">item 124</td>
        </tr>
        <tr>
            <td colspan="2">item 131</td>
            <td colspan="2">item 132</td>
            <td colspan="2">item 133</td>
            <td colspan="2">item 134</td>
        </tr>
    </tbody>
    <tbody>
        <tr style="background-color:green; color:white">
            <td  colspan="2" class="flip" style="width:250px;"> Section 2 </td>
             <td  colspan="2" class="flip" style="width:250px;"> Section 2 </td>
             <td  colspan="2" class="flip" style="width:250px;"> Section 2 </td>             <td  colspan="2" class="flip" style="width:250px;"> Section 2 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td colspan="2">item 211</td>
            <td colspan="2">item 212</td>
            <td colspan="2">item 213</td>
            <td colspan="2">item 214</td>
        </tr>
        <tr>
            <td colspan="2">item 221</td>
            <td colspan="2">item 222</td>
            <td colspan="2">item 223</td>
            <td colspan="2">item 224</td>
        </tr>
        <tr>
            <td colspan="2">item 231</td>
            <td colspan="2">item 232</td>
            <td colspan="2">item 233</td>
            <td colspan="2">item 234</td>
        </tr>
    </tbody>
    <tbody>
        <tr style="background-color:green; color:white">
             <td  colspan="2" class="flip" style="width:250px;"> Section 3 </td>
             <td  colspan="2" class="flip" style="width:250px;"> Section 3 </td>
             <td  colspan="2" class="flip" style="width:250px;"> Section 3 </td>
             <td  colspan="2" class="flip" style="width:250px;"> Section 3 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td colspan="2">item 311</td>
            <td colspan="2">item 312</td>
            <td colspan="2">item 313</td>
            <td colspan="2">item 314</td>
        </tr>
        <tr>
            <td colspan="2">item 321</td>
            <td colspan="2">item 322</td>
            <td colspan="2">item 323</td>
            <td colspan="2">item 324</td>
        </tr>
        <tr>
            <td colspan="2">item 331</td>
            <td colspan="2">item 332</td>
            <td colspan="2">item 333</td>
            <td colspan="2">item 334</td>
        </tr>
    </tbody>
</table>

Styles applied to the first row should cascade through the columns.. so try applying style to the TH's instead of the 2nd row like your doing. — JF it, Mar 12 '14 at 10:37
possible duplicate of [CSS: How to set the table column width constant regardless of the amount of text in its cells?](http://stackoverflow.com/questions/4457506/css-how-to-set-the-table-column-width-constant-regardless-of-the-amount-of-text) — Frankenscarf, Mar 12 '14 at 10:44

score 1 · Accepted Answer · answered Mar 12 '14 at 10:45

1

Write:

#main_table{table-layout:fixed;}

Updated fiddle here.

answered Mar 12 '14 at 10:45

codingrose

15,563
11
39
58

score 0 · Answer 2 · answered Mar 12 '14 at 10:43

0

Assign fixed table layout property to your table and word-wrap:break-word; for the td's

Hope that will solves your problem

<table id="main_table" style="width:100%;table-layout:fixed;">

in css

td {
    padding: 5px;
    word-wrap:break-word;
}

answered Mar 12 '14 at 10:43

Sarath

608
4
12

how to align my td's with equal width?

2 Answers2