CSS表列autowidth

鉴于以下如何使我的最后一列自动大小的内容? (最后一列应该是autosize-width的内容,假设我只有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("..http://img.dovov.comsprites4.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;} 

以下将解决您的问题:

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

如果你想确保最后一行不包裹,并因此确定你想要的方式,请看看

 td { white-space: nowrap; } 

您可以指定除最后一个表格单元之外的所有宽度,并为表格添加一个表格布局:固定宽度和宽度。

你可以设置

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

(或者如Sanderbuild议的那样将其设置为最后一个TD)。

这迫使内联LI不会中断。 不幸的是,这不会导致在包含UL(和这个父TD)中的新的宽度计算,因此不会自动化最后一个TD。

这意味着:如果一个内联元素没有给定的宽度,TD的宽度总是自动计算(如果没有指定)。 然后,其计算宽度的内联内容得到渲染,并应用white-space属性,将其内容扩展到计算的边界之外。

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

使用自动和最小或最大宽度是这样的:

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