CSS表列自动CSS
CSS表列自动CSS
提问于 2011-01-21 18:44:39
给定以下内容，我如何使我的最后一列根据其内容自动调整大小？(最后一列应该自动调整到内容的宽度。假设我只有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;}回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-01 23:36:07
下面的方法可以解决你的问题：
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>Stack Overflow用户
发布于 2011-01-21 18:46:49
如果您希望确保最后一行不换行，从而按您希望的方式调整大小，请查看
td {
white-space: nowrap;
}Stack Overflow用户
发布于 2011-01-24 21:42:36
使用自动和最小或最大宽度，如下所示：
td {
max-width:50px;
width:auto;
min-width:10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4757844
复制相关文章
相似问题
腾讯云开发者
