Unicorn
Unicorn

Reputation: 109

How to make inner table align with outer table

Here is my table: http://jsfiddle.net/1uw1xsxr/

<table border=1 width=100%><tr><td>id</td><td>status</td><td>action</td><td>date</td><td>by</td></tr>
<tr><td colspan=5><table border=1 width=100%>
    <tr><td>1257</td><td>red</td><td>go</td><td>1-1-2011</td><td>dora</td></tr>
    <tr><td>1257</td><td>red</td><td>go</td><td>1-1-2011</td><td>dora</td></tr>
    <tr><td>1257</td><td>red</td><td>go</td><td>1-1-2011</td><td>dora</td></tr>
    </table>
    </td></tr></table>

What I have to do so the inner table column aligns with outer table column?

Upvotes: 1

Views: 1179

Answers (2)

benjaminz
benjaminz

Reputation: 3228

Are those "outer table columns" your table headers?

If so, use:

<table>
    <thead>
        <tr><th>Header1</th><th>Header2</th></tr>
    </thead>

    <tbody>
    </tbody>
</table>

Upvotes: 0

Igor Moraru
Igor Moraru

Reputation: 7729

Set the same width of td on both tables:

table td {width: 20%}

Upvotes: 2

Related Questions