CODEWITHSUNDEEP
htmlhtml-table
Michel
Michel

Reputation: 11755

HTML nested table layout

Here is a simple question about HTML layout. The code below illustrates it. In each cell of the top table there is a sub-table. I would like each sub-table to take the whole space inside the cell(of the top table) it is using. But this is not what is happening. In fact each sub-table is only using the space it needs to display its own contents. How can I modify the code to get the result I want?

<table>
    <tr><td>
        <table bgcolor=#334433>
            <tr><td>
                Al
            </td></tr>
        </table>
    </td></tr>
    <tr><td>
        <table bgcolor=#334433>
            <tr><td>
                Peter Wells
            </td></tr>
        </table>
    </td></tr>
    <tr><td>
        <table bgcolor=#334433>
            <tr><td>
                World Champions in the 20th century
            </td></tr>
        </table>
    </td></tr>
</table>

Upvotes: 0

Views: 906

Answers (2)

Harish Karthick
Harish Karthick

Reputation: 720

.tbl{
	width:100%;
}
<table>
    <tr><td>
        <table class="tbl" bgcolor=#334433 >
            <tr><td>
                Al
            </td></tr>
        </table>
    </td></tr>
    <tr><td>
        <table class="tbl" bgcolor=#334433>
            <tr><td>
                Peter Wells
            </td></tr>
        </table>
    </td></tr>
    <tr><td>
        <table class="tbl" bgcolor=#334433>
            <tr><td>
                World Champions in the 20th century
            </td></tr>
        </table>
    </td></tr>
</table>

Here is the code :

Upvotes: 0

corix010
corix010

Reputation: 571

Specify the width:

<table>
    <tr><td>
        <table bgcolor=#334433 style="width:100%">
            <tr><td>
                Al
            </td></tr>
        </table>
    </td></tr>
    <tr><td>
        <table bgcolor=#334433 style="width:100%">
            <tr><td>
                Peter Wells
            </td></tr>
        </table>
    </td></tr>
    <tr><td>
        <table bgcolor=#334433 style="width:100%">
            <tr><td>
                World Champions in the 20th century
            </td></tr>
        </table>
    </td></tr>
</table>

Upvotes: 3

Related Questions