☰

セルの幅をコンテンツに合わせる 質問する

tag-icon • tag-icon html css html-table
セルの幅をコンテンツに合わせる 質問する

次のマークアップがある場合、CSS を使用して、1 つのセル (列内のすべてのセル) を、拡大するのではなく (デフォルトの動作)、その中のコンテンツの幅に合わせるにはどうすればよいでしょうか。

td.block {
  border: 1px solid black;
}
<table style="width: 100%;">
  <tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
  </tr>
</table>

幅をハードコードすることもできるとわかっていますが、その列に配置されるコンテンツは動的であるため、そうすることは避けたいと思います。

下の画像を見ると、最初の画像はマークアップによって生成されたものです。2 番目の画像が私が求めているものです。

ここに画像の説明を入力してください

ベストアンサー1

あなたの質問を理解したかどうかわかりませんが、ちょっと考えてみます:

td {
    border: 1px solid #000;
}

tr td:last-child {
    width: 1%;
    white-space: nowrap;
}
<table style="width: 100%;">
    <tr>
        <td class="block">this should stretch</td>
        <td class="block">this should stretch</td>
        <td class="block">this should be the content width</td>
    </tr>
</table>

おすすめ記事