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

Question

我一直在寻找关于如何做到这一点的答案，包括Stack Overflow上的几十个答案，它们几乎提供了解决方案。

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

删除：一个简单的图标。这必须是固定宽度（因为它使用图像）

名称：列表中项目的名称。这应该填充剩余的可用空间，但如果文本溢出，我希望省略号出现。

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

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

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

如果有人可以提供一个小提示来表明这一点，这绝对是太棒了。

编辑：非常感谢普利茅斯！

Answer 1

我创造了一个小提琴here。

这些是重要的风格：

table
{
    table-layout:fixed;
}

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

这就是你要追求的吗？