CODEWITHSUNDEEP
htmlcss
Elitmiar
Elitmiar

Reputation: 36879

Table within td tag stretches td tag

I have an table with 4 columns each having a specified width in percentage. eg. td width="25%" and the table with a width of 100%. Now the width works perfectly when no other table is inside a column, as soon as I add the following table inside the td tag with a specific width it increases the percentage automatically.

<td width="25%">
<table cellspacing="0" cellpadding="3" border="1">
<tbody>
<tr>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
</tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</td>

I then tried adding the table above to a div tag, which sorted the stretching of column problem but overflowed the div tag containing the table

<div style="max-width: 100px !important; ">
<table cellspacing="0" cellpadding="3" border="1">
<tbody>
<tr>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
</tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</div>

Is there any way so that the table inside the td tag width specified widht automatically inherits the width and does not control it? I also tried specifying the width of the table inside the column and that also did not work

Upvotes: 0

Views: 1758

Answers (2)

kolin
kolin

Reputation: 2344

is it not because you have unclosed tags?

    <td width="25%">
<table cellspacing="0" cellpadding="3" border="1">
    <tbody>
        <tr>
            <td style="text-align: center;">text</td>
            <td style="text-align: center;">text</td>
            <td style="text-align: center;">text</td>
            <td style="text-align: center;">text</td>
            <td style="text-align: center;">text</td>
        </tr>
        <tr>
             <tr>
                    <tr>
</tbody>
</table>
</td>

should be

<td width="25%">
<table cellspacing="0" cellpadding="3" border="1">
<tbody>
<tr>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
<td style="text-align: center;">text</td>
</tr>
<tr>
    <td colspan="5">&nbsp;</td>
</tr>

</tbody>
</table>
</td>

Upvotes: 0

Terry
Terry

Reputation: 14219

Borders and padding can cause the elements to be larger than they appear. For example a table of width: 100%; border-width: 1px inside a div with width: 100px will actually try to fit 102px inside because of the pixel width of the border.

For more information on this, see the IE box model bug

Upvotes: 3

Related Questions