Html 流体和固定柱表

我有一个表在我的布局，有5列，其中3列应该是固定宽度的px和其他2个应该是流体

起初听起来很简单，但问题是两个液柱的行为应该不同

最后一列应尽可能拉伸以适合其内容，因此它们永远不会隐藏，但不应留下空白。中间的列应该占据它能找到的所有可用空间，但也会溢出到隐藏的位置，以防最后一列需要变大

我试着用css来实现这一点，但我没能成功。。。有没有办法用纯css或者我需要js来实现这一点

编辑

这就是我目前得到的：

HTML

---

它几乎像预期的那样工作。除了最后一列之外。

试试这个，看看它是否接近您要查找的内容：

演示-

---

如果不需要包装，请执行以下操作：

td{
    padding: 10px;  
}

若需要换行，则需要将表格的宽度更改为“自动”，并添加“最小宽度”参数

table{
   width: auto;
   min-width: 100%;
   table-layout: fixed;
}

---

对CSS文件进行了更改

*演示-

---

也许我能帮忙，也许不行

首先，我将使用div而不是tr/td。老实说，自从引入CSS以来，我就不需要使用表了，我很惊讶有些人仍然需要使用表。但这可能是有原因的，所以请不要将其视为批评

如果使用divs，请编辑代码的此部分：

.visible {
  overflow:visible;
  min-width: 210px;
}

这将确保div至少有210像素宽，不管是什么。它应该会起作用。 顺便说一句，如果这是页面上唯一的表，并且div或td在最小高度的意义上是唯一的，那么您可能希望使用id而不是类。这将使您的代码更干净、更优雅。

---

希望这有帮助。

请添加代码/jsfiddle这是实际的表数据吗？换句话说，它必须是

表格吗？@ChrisRockwell它确实是表格数据。@AndrewDonaldJohnson我真的没有太多要展示的。。。到目前为止，我只得到了一个常规的表标记：/提供标记供我们复制/粘贴可以更快地得到答案。键入一个5列表所需的所有标记是一项相当大的工作。。。尝试调整它的大小，但还没有完全确定。最后一列上还有剩余的空白。。但谢谢你的帮助，如果没有人想出解决办法，我们现在得到的将不得不这么做：为我工作。谢谢
td{
    padding: 10px;  
}

table{
   width: auto;
   min-width: 100%;
   table-layout: fixed;
}

table{
   width: 100%;
    table-layout:fixed;
}

td{
    padding: 10px;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{
  overflow:visible;
}

.hidden{
    overflow:hidden;
    max-width:20%;
    white-space:nowrap;
}

.visible {
  overflow:visible;
  min-width: 210px;
}