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