0

それぞれがパーセンテージで指定された幅を持つ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タグ幅内のテーブルが自動的に幅を継承して制御しないようにする方法はありますか？また、列内のテーブルの幅を指定しようとしましたが、それも機能しませんでした

4

2 に答える 2

3

ボーダーとパディングにより、要素が表示よりも大きくなる可能性があります。たとえばwidth: 100%; border-width: 1px、div の内側のテーブルは、境界線のピクセル幅のため、width: 100px実際には内側に収まるようにします。102px

詳細については、IE ボックス モデルのバグを参照してください。

于 2012-04-13T14:53:52.490 に答える
0

閉じていないタグがあるからではありませんか？

    <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>
于 2012-04-13T14:58:41.567 に答える