Question

我有一个包含4列的表，每列都有指定的宽度百分比。例如。 td width =“25％”，表格宽度为100％。现在宽度在列中没有其他表时完美地工作，只要我在td标记内添加具有特定宽度的下表，它就会自动增加百分比。

<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>

然后我尝试将上面的表添加到div标签中，该标签对列问题的拉伸进行了排序，但溢出了包含表格的div标签

<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>

有没有办法让td标签宽度指定的表格自动继承宽度而不控制它？我也尝试在列中指定表格的宽度，但也无法正常工作

Answer 1

边框和填充可能会导致元素比它们看起来更大。例如，由于边框的像素宽度，width: 100%; border-width: 1px内的width: 100px表格实际上会尝试将102px放入内部。

有关详细信息，请参阅IE box model bug

Answer 2

是不是因为你有未关闭的标签？

    <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>

应该是

<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>

td标签内的表拉伸td标签

2 个答案: