Question

我正在尝试将最后三列设置为尽可能小，因为它们只是持有行动的图标/链接。

我还希望大文本列尽可能多地保留剩余宽度。

这是我能找到的，但对我不起作用：

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

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

我尝试使用相对长度（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

回答您的一个要求：

最后三个图标/动作列尽可能小而没有任何截止

要执行此操作，我会float td或将其设置为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来填充我在示例中提出的边框位

注意：当屏幕尺寸变小时，这些td会叠加。

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

2 个答案: