CSS:如何拥有一个带有动态宽度单元格的可滚动表

Question

[我的问题的解决方案只需要在 Chrome 中工作；这是为了在我们可以控制正在使用的浏览器的内部环境中使用。]

问题:

我有一个表格，其中除一个单元格外的所有单元格都是固定宽度，除了最后一个单元格只占用其余空间。我的问题是我需要将此表设置为固定高度并且正文不会滚动，如下所示:http://jsfiddle.net/2zE5j/11/

table tbody {
    /*display:block;*/
    height:200px;
    overflow:hidden;
    overflow-y:auto;
}

根据 this回答你可以使用 display:block;使表格在固定高度内可滚动。然而，虽然它现在确实滚动了，但当我这样做时，它完全弄乱了单元格宽度，如下所示:http://jsfiddle.net/2zE5j/12/

table tbody {
    display:block;
    height:200px;
    overflow:hidden;
    overflow-y:auto;
}

两个 jsfiddle 之间只有一行不同。

问题:

那么，我怎样才能拥有一个表格，其中最后一个单元格具有动态宽度并且正文是可滚动的？

Answer 1

我得出的结论是，我不值得花时间用 CSS 来解决这个问题，尽管这确实不应该那么难。 TimSPQR 的建议还不错，但破坏了我实际页面上的其他内容，不值得为此付出痛苦。相反，我求助于使用 javascript 来更改相关特定列的一些全局 CSS 设置。这也允许动态列位于表格的中间，而不仅仅是最后一个。

window.onresize = function () {
    var rule = getCSSRule('.expand');
    rule.style.width = (document.getElementById('demoTable').clientWidth - 153) + 'px';
};

您可以在此处查看我的其余代码:http://jsfiddle.net/2zE5j/17/