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;
}

两个jsfiddles之间只有一行差异。

问题：

那么，我怎么能得到一个表格，其中最后一个单元格的动态宽度和主体都是可滚动的？

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/