CODEWITHSUNDEEP
javascripthtmlcss
user1184100
user1184100

Reputation: 6894

Aligning td's in a table

In the below table how can Item6 be aligned with Item2 when the table is constructed dynamically? Is there a pure css or css3 way of achieving this?

Current Table

enter image description here

Required Table

enter image description here

<table class="qe">
<tbody>
    <tr>
        <td>Item1</td>
        <td>Item2</td>
        <td>Item3</td>
    </tr>
    <tr>
        <td>Item4</td>
    </tr>
    <tr>
        <td>Item5asfasfasf</td>
        <td>Item6</td>
    </tr>
</tbody>
</table>

Fiddle : http://jsfiddle.net/jxvf9arL/1/

Upvotes: 2

Views: 49

Answers (2)

Yuval
Yuval

Reputation: 514

you should add colspan to the tds. so if the maximum columns is N, and the current row has m columns, you should add colspan=n-m to the last cell in the row.

also, something in the tr stylying 

table tr{
    display:table;
    width:100%;   
    }

is wrong. http://jsfiddle.net/jxvf9arL/7/ would work

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Use colspan attribute properly and remove display:table; rule for table tr, it's messing with table layout:

table{
    width:500px;
    border:1px solid #000;
    table-layout:fixed;
}
table td{
    width:33%;
    border:1px solid #777;
    background:#eaeaea;
}
<table class="qe">
    <tbody>
        <tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr>
        <tr>
            <td colspan="3">Item4</td>
        </tr>
        <tr>
            <td>Item5asfasfasf</td>
            <td colspan="2">Item6</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions