CSS 表格列自动宽度

Question

鉴于以下情况，我如何使最后一列自动调整其内容的大小？ （最后一列应该根据内容自动调整宽度。假设我只有 1 个 li 元素，它应该缩小而不是 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;}

Answer 1

以下将解决您的问题：

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

灵活的、基于类的解决方案

更灵活的解决方案是创建一个.fitwidth 类并将其应用于您希望确保其内容适合一行的任何列：

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>

Answer 2

如果您想确保最后一行不换行并因此按您想要的方式调整大小，请查看

td {
 white-space: nowrap;
}

Answer 3

您可以指定除最后一个表格单元格之外的所有单元格的宽度，并为表格添加一个 table-layout:fixed 和一个宽度。

你可以设置

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

（或者按照 Sander 的建议将其设置为最后一个 TD）。

这会强制内联 LI 不中断。不幸的是，这不会导致包含 UL（和此父 TD）中的新宽度计算，因此不会自动调整最后一个 TD。

这意味着：如果内联元素没有给定宽度，则始终首先自动计算 TD 的宽度（如果未指定）。 然后呈现具有此计算宽度的内联内容并应用white-space-property，将其内容拉伸到计算边界之外。

所以我猜在最后一个 TD 中没有具有特定宽度的元素是不可能的。

Answer 4

像这样使用自动和最小或最大宽度：

td {
max-width:50px;
width:auto;
min-width:10px;
}