html - テーブルの列幅を固定するにはどうすればよいですか?

Question

最初の列が 65%、2 番目の列が 35% の 2 つの列を持つテーブルがあります。最初の列にその 65% を埋めるのに十分なテキストがある場合、画面の 100% に完全に収まりますが、空の場合 (または少量のテキスト)、最初の列が縮小され、2 番目の列が拡大されます。

テキストの有無にかかわらず、最初の列を常に画面の 65% にするにはどうすればよいですか?

Answer 1

これを試して：

<table class="fixed_width">
    <col width="65%" />
    <col width="35%" />
    <tr>
        <td>your data</td>
        <td>your data</td>
    </tr>
</table>

そしてCSS：

table.fixed_width { table-layout:fixed; }
table.fixed_width td { overflow: hidden; }

Answer 2

<table>
    <tr>
        <td style="width: 65%;">
            first column
        </td>
        <td style="width: 35%;">
            second column
        </td>
    </tr>
</table>

最初の列は、65％より大きいもの（たとえば大きな画像）を中に入れない限り、常に65％のままになります。

Answer 3

このCSSを追加してみてください：

table {
    table-layout: fixed;
    empty-cells: show;
}

https://developer.mozilla.org/en-US/docs/CSS/empty-cells

https://developer.mozilla.org/en-US/docs/CSS/table-layout

@kalpeshの推奨事項<colgroup>も良いものです。

https://developer.mozilla.org/en-US/docs/HTML/Element/colgroup

Answer 4

このcssを試してください：

.table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
    }

    .td1 {
      border: 1px solid #000;
      width: 65%;
    }

    .td2{border: 1px solid #000;
      width: 35%;
    }

と

<table class="table">
    <tr>
        <td class="td1">data</td>
        <td class="td2">data</td>
    </tr>
</table>