HTMLでテーブルtrのtdセルのwidth属性を設定する方法

テーブルの幅は適応型であり、一部の TD は固定幅です。テーブルの幅は画面に応じて変化する値ではなく、原則として固定値に設定する必要があります。次に、テーブルの td セルの幅を設定する方法を見てみましょう。

例 1: テーブルの幅は 600 ピクセルで、テーブルの td のすべての幅の合計は 600 ピクセル未満です。ブラウザは次に従って幅を自動的に計算します。 td

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
               <td style="width: 200px;">我是200px</td>
               <td style="width: 200px;">我也是200px</td>
            </tr>
</table>
运行结果：两个td都是300px;

テーブルの幅の比率は 600 ピクセルです。最初の 2 つの TD の幅はすでに 600 ピクセルなので、3 番目の TD の幅は指定されません。この場合、 3 番目の TD の幅はコンテンツに基づき、最初の 2 つは幅に基づきます。比率列の計算幅。

例 2: 最初の 2 つの td はテーブルの幅より小さいため、最後の td が補完の役割を果たします。

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
                <td style="width: 300px;">我是200px</td>
                <td style="width: 300px;">我也是200px</td>
                <td >我是根据内容的</td>
            </tr>
</table>

例 3: テーブルの td 内で、ブロック要素がtd の幅、およびテーブルのテーブル レイアウトを超えて配置: 固定; (固定とは、td の幅が固定され、td の内容が変更されても変化しないことを意味します)。この方法では、IE6 および 7 ではスクロール バーが表示されないため、td に overflow: auto; を記述しないようにしてください。最善の方法は、div をラップして幅を 100%

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
            <tr>
                <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td>
               <td >我是自由宽度</td>
            </tr>
        </table>

に設定することです。

以上がHTMLでテーブルtrのtdセルのwidth属性を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。