html - CSS 表格列自动宽度

Question

鉴于以下内容，我如何使我的最后一列自动调整其内容大小？ (最后一列应该根据内容自动调整宽度。假设我只有 1 个 li 元素，它应该缩小 vs. 有 3 个 li 元素等):

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

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

Answer 1

以下将解决您的问题:

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>