鉴于以下几点,我如何使我的最后一列自动调整大小?(最后一列应自动调整内容的宽度。假设我只有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;}
以下将解决您的问题:
td.last { width: 1px; white-space: nowrap; }
一种更灵活的解决方案是创建一个.fitwidth类,并将其应用于您要确保其内容适合一行的任何列:
.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>