348

次のマークアップが与えられた場合、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>

編集:幅をハードコーディングできることはわかっていますが、その列に入るコンテンツは動的であるため、そうしないでください。

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

ここに画像の説明を入力

4

6 に答える 6

565

私はあなたの質問を理解しているかどうかわかりませんが、私はそれを突き刺します:

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>

于 2012-06-29T18:41:19.830 に答える