Css 可变大小表中的固定和可变大小列

我已经到处寻找关于如何做到这一点的答案，包括几十个关于堆栈溢出的答案，它们提供了几乎但不完全是解决方案

我正在尝试制作一个包含许多选项的表格/列表。设想一个包含以下列的表：

删除：一个简单的图标。这必须是固定宽度（因为它使用图像） 名称：列表中项目的名称。这应该会填满剩余的可用空间，但是如果文本溢出，我希望出现省略号。 选项A/B/C：您可以想象这些是复选框，也是固定的

所以在一张宽大的桌子上看起来是这样的：

| X | Item 1 in the list               | A | B | C |
| X | Item 2                           | A | B | C |
| X | Item 3 has a pretty long name    | A | B | C |
| X | Item 4's name is long, realll... | A | B | C |

在短桌子上（或者说，在调整窗口大小后）：

如果有人能提供一把小提琴来展示这一点，那绝对是太棒了

编辑：非常感谢普利茅斯

我做了一把小提琴

以下是重要的样式：

table
{
    table-layout:fixed;
}

.col2
{
    width:auto;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

这就是你想要的吗

table
{
    table-layout:fixed;
}

.col2
{
    width:auto;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}