1. ホーム
  2. html

[解決済み] セル幅をコンテンツに合わせる

2022-03-16 09:20:39

質問

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

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<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>

EDIT: 幅をハードコードすることもできますが、そのカラムに入るコンテンツは動的なので、そうしたくないのです。

下の画像を見てみると、最初の画像はマークアップが生成するものです。2番目の画像は、私が欲しいものです。

解決方法は?

ご質問の意味がよくわからないのですが、一応お答えします。

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>