如何将列宽设置为尽可能小？

Question

我正在尝试将最后三列设置为尽可能小，因为它们只是保存用于操作的图标/链接。

我还希望大文本列具有尽可能多的剩余宽度。

以下是我能够找到但对我不起作用的内容：

Two columns table : one as small as possible, the other takes the rest

这个解决方案对我不起作用，因为我有多个列，我想占用尽可能多的空间，所以我不能将它们中的任何一个设置为 width = 100%。

force column size to smallest possible

我尝试使用相对长度（width="*"），但它似乎没有任何效果。也许是因为我之前没有设置任何宽度，所以没有“剩余宽度”可以分配？

HTML：

<table>
  <colgroup class='data' span='5'>
    <col class='date' span='1'/>
    <col class='id' span='1'/>
    <col class='title' span='1'/>
    <col class='status' span='1'/>
    <col class='description' span='1'/>
  </colgroup>
  <colgroup class='action' span='3'>
    <col class='show' span='1'/>
    <col class='edit' span='1'/>
    <col class='delete' span='1'/>
  </colgroup>
  <tr>
    <th>Date</th>
    <th>ID</th>
    <th>Title</th>
    <th>Status</th>
    <th>Description</th>
    <th colspan='3'></th>
  </tr>

  <tr>
    <td class='date'>medium</td>
    <td class='id'>medium</td>
    <td class='title'>large</td>
    <td class='status'>medium</td>
    <td class='description'>large</td>
    <td class='show'>small</td>
    <td class='edit'>small</td>
    <td class='delete'>small</td>
  </tr>
</table>

CSS：

table {
  width: 100%;
}

table td.title, td.description {
  text-align: left;
}

table td.date, td.id, td.status {
 text-align: center;
}

table td.show, td.edit, td.delete {
}

table colgroup.action col {
  width:"1*";
}

table colgroup.data col {
  width:"*";
}

所以按照优先顺序：

• 表格跨越父容器的整个宽度

• 最后三个图标/操作列要尽可能小而没有任何截断

• 具有“大”数据（类标题和描述）的列应尽可能多地占用剩余空间

• 具有“中等”数据的列应该是其内容的大小，两边都有一些边距（如果很难做到这一点，我不介意只扔一个固定的宽度）

我不需要 colgroup 和 col 标签，但我只是将它们留在这里以防它们有用。我尝试了使用和不使用它们的不同排列，但似乎仍然无法让它工作。我还考虑过对数据列使用百分比，但我希望浏览器根据实际内容确定宽度，而不是我强加可能不是最佳的预定义规则。

Answer 1

对于要缩小的列，将宽度设置为 1 px：

table {
  width: 100%;
}

th, td {
  border: 1px solid #eee;
}

td.title, td.description {
  text-align: left;
}

td.date, td.id, td.status {
  padding: 0 10px;
  text-align: center;
  width: 1px;
}

td.show, td.edit, td.delete {
  width: 1px;
}

那么你就可以完全摆脱 colgroups 了。

查看演示here。

顺便说一句，您可以考虑改用CSS flexible boxes。

Answer 2

回答您的一项请求：

最后三个图标/操作列尽可能小 任何截止

为此，我将floattds 或将它们设置为display:inline-block;

如果您知道所用图标的大小，则可以在图标上方的th 上设置宽度（我称之为class="icons"）。

如果你不知道宽度，你可以使用一些 jQuery 来计算。

var a = $('td.show').width();
var b = $('td.edit').width();
var c = $('td.delete').width();

$('.icons').css('width', a+b+c+6+"px");

示例：http://jsfiddle.net/KQs2K/1/

需要额外的 6px 来填充我在示例中添加的边框位

注意：这些tds 会在屏幕变小时堆叠起来。