CSS table column autowidth

鉴于以下内容，我如何使自己的最后一列自动调整大小以适应其内容？（最后一栏应自动调整宽到内容假设我有只应该收缩与具有3种li元素等1个li元素。）：CSS table column autowidth

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

来源

2011-01-21 ShaneKm

171

下面将解决你的问题：

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

来源

2012-06-01 15:36:06

如果要确保最后一行不换行，因此大小你想要的方式，看看

td { 
white-space: nowrap; 
}

来源

2011-01-21 10:46:48 Sander

谢谢！即时魔术。 – Alexandr 2017-01-16 20:42:57

~~你可以指定所有的宽度，但最后的表格单元格nd添加一个表格布局：固定的和宽度的表格。~~

您可以设置

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

（或设置此最后TD作为桑德建议代替）。

这会强制内联LI不会中断。不幸的是，这不会导致包含UL（以及该父母TD）的新宽度计算，因此不会自动确定最后的TD。

这意味着：如果内联元素没有给定宽度，则TD宽度总是首先自动计算（如果未指定）。然后其计算宽度的内联内容将被渲染，并应用white-space属性，将其内容扩展到计算的边界之外。

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

来源

2011-01-21 10:46:54 acme

不好。这无疑是我想要夸大的。我不想指定列的宽度。列应自动调整大小，最后一列应按其内容大小排列。 – ShaneKm 2011-01-21 11:01:37

你能提供你使用的类的CSS定义吗？ – acme 2011-01-21 11:09:48

用css更新了 – ShaneKm 2011-01-21 11:59:08

-1

使用汽车和最小或最大宽度是这样的：

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

来源

2011-01-24 13:42:35 Abudayah

CSS table column autowidth

回答

相关问题