CSS表列自动宽度


100

鉴于以下几点,我如何使我的最后一列自动调整大小?(最后一列应为内容的大小自动调整大小。假设我只有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;}

Answers:


218

以下将解决您的问题:

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>

3
完美的作品!(我的案例的表宽度为100%,其他列均没有宽度。将其应用于一列)。测试在IE7 / 8/9,火狐12和Chrome 19.
marcovtwout

哇,没想到html表可以做到这一点。谢谢!
kulpae 2012年

14
无需手动添加'.last'类,您只需执行'td:last-child'作为选择器即可。
T.Ho

3
这个解决方案运作良好没有table-layout: fixed被在CSS设置的问题jsfiddle.net/hCkch/1
大卫Sherret

1
腾腾的辉煌,队友!真正聪明的技巧是“优先安排”某些列,以确保它们不会被大型“文本”列(例如“描述”或“注释”)挤压到多行中。好一个!为了使它更加有用,我将调用该类.fitwidth,然后将其设置在您不想转到多行的列上。我将编辑您的答案以添加该答案。
约书亚·品特

25

如果要确保最后一行没有换行,从而调整所需大小,请查看

td {
 white-space: nowrap;
}

1

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

你可以设置

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

(或按照Sander的建议将其设置为最后一个TD)。

这会强制in-LI不中断。不幸的是,这不会导致在包含的UL(和该父TD)中进行新的宽度计算,因此不会自动调整最后一个TD的大小。

这意味着:如果一个内联元素没有给定的宽度,则总是首先自动计算TD的宽度(如果未指定)。然后,呈现具有此计算宽度的内联内容,并white-space应用-property,将其内容扩展到计算边界之外。

因此,我如果没有最后一个TD中具有特定宽度的元素,这是不可能的。


不好。那恰恰是我想做的事情。我不想o指定col宽度。列应自动调整大小,最后一个列应缩小到其内部内容的大小。
ShaneKm 2011年

您可以为您使用的类提供CSS定义吗?
acme

-2

使用自动和最小或最大宽度,如下所示:

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

1
这不能按要求工作,当我的内容较小时,它仍然使用max-width。
marcovtwout 2012年

最小宽度不适用于表格单元格。
尼克
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.