web-dev-qa-db-ja.com

セル幅をコンテンツに組み合わせる

次のマークアップを考えて、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番目の画像は私が欲しいものです。

enter image description here

htmlcsshtml-table
221
Mansfield

私はあなたの質問を理解しているかどうかわからないが、私はそれを突き刺すつもりだ。 例のJSfiddle 。

HTML：

<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>

CSS：

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}
387
MetalFrog

設定

max-width:100%;
white-space:nowrap;

あなたの問題を解決します。

37
Shubham Nigam

私にとっては、これがテーブルとそのカラムに最適な自動サイズ調整と自動サイズ変更です（css！importantを使用してください。使用できない場合のみ）。

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

テーブルまたはテーブル列にCSS幅を指定しないでください。テーブルの内容が大きい場合は、画面サイズを超えます。

7
myset

私が見つけることができるすべての仕様に従って、要素の1％または100％にCSSの幅を設定することは親に関連しています。この記事を書いている時点ではBlink Rendering Engine（Chrome）とGecko（Firefox）は1％または100％（列を縮小したり利用可能なスペースを埋めるために列を作成）をうまく処理するようです私はそれを正しくレンダリングすることができました。

1つの選択肢は、tableをCSS4 flex divに置き換えることです。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ /

これは新しいブラウザでも動作します。つまり、IE11 +の記事の下部にある表を参照してください。

2
Mladen Adamovic

これで私の問題は解決しました

.d-inline-block {
    display: inline-block!important;
}
0
Arun Prasad E S

シンプル：

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>
0
Parth Jani