web-dev-qa-db-ja.com

CSSテーブル列の自動幅

次のことを考えると、最後の列をコンテンツの自動サイズにする方法は？ （最後の列はコンテンツの幅を自動調整する必要があります。縮小する必要があるli要素が1つしかない場合と3つのli要素がある場合など）：

            <table cellspacing="0" cellpadding="0" border="0">
            <thead><!-- universal table heading -->
                <tr>
                    <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
                    <td class="tc">Type</td>
                    <th>File</th>
                    <th>Sample</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td class="last">
                        <ul class="actions">
                            <li><a class="iconStats" href="#">Statystyki</a></li>
                            <li><a class="iconEdit" href="#">Edytuj</a></li>
                            <li><a class="iconDelete" href="#">Usuń</a></li>

                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

Css：

table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}
htmlcssxhtmlcss3
92
ShaneKm

以下はあなたの問題を解決します：

td.last {
    width: 1px;
    white-space: nowrap;
}

柔軟なクラスベースのソリューション

さらに柔軟なソリューションは、.fitwidthクラスを作成し、その内容を1行に収まるようにしたい列に適用することです。

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

そして、あなたのHTMLで：

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>
203
Doug Amos

最後の行が折り返されないようにして、希望するサイズにしたい場合は、

td {
 white-space: nowrap;
}
24
Sander

最後のテーブルセルを除くすべてのセルの幅を指定し、table-layout：fixedと幅をテーブルに追加できます。

設定できます

table tr ul.actions {margin: 0; white-space:nowrap;}

（または、サンダーが代わりに提案したように、これを最後のTDに設定します）。

これにより、インラインLIが破損しなくなります。残念ながら、これにより、含まれるUL（およびこの親TD）で新しい幅の計算が行われないため、最後のTDが自動サイズ調整されません。

つまり、インライン要素に幅が指定されていない場合、TDの幅が常に最初に自動的に計算されます（指定されていない場合）。 Thenこの計算された幅のインラインコンテンツがレンダリングされ、white-space-プロパティが適用され、計算された境界を超えてコンテンツがストレッチされます。

したがって、私guessは、最後のTD内に特定の幅の要素がなければ不可能です。

1
acme