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

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

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

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

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

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

HTML:

因此，按照优先顺序：

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

• 最后三个图标/动作列应尽可能小，无任何截断

• 包含“大”数据（类标题和说明）的列应尽可能多地占用剩余空间

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

---

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

要回答您的一个请求：

最后三个图标/动作列应尽可能小，无需 任何切断

为此，我将

float

tds或将它们设置为

display:inline块

如果您知道正在使用的图标的大小，则可以在图标上方的
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");

例如：

需要额外的6px来填充我在示例中抛出的边界位

注意：当屏幕尺寸变小时，这些
td
s将堆叠起来。
对于要收缩的列，请将宽度设置为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了

见演示

顺便说一下，您可以考虑使用。
谢谢您的响应。这是一个非常快速和漂亮的jQuery脚本。我希望CSS一个人能做到这一点。再次感谢您抽出时间来帮助我。：-）
width=“*”
和
width=“1*”
都是width属性的无效值。不要那样做。
var a = $('td.show').width();
var b = $('td.edit').width();
var c = $('td.delete').width();

$('.icons').css('width', a+b+c+6+"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;
}