html - 如何将固定宽度和缩小到内容相结合的存档表格单元格？

Question

假设我有一个表格，一些单元格应该有一个等于它们的内容，一些是固定的，其他的可以填充其余的。 我使用了 100% 的方法然后我丢失了固定大小。我做的每一件事，我都无法同时实现:

.theTable{
    display:table; 
    width:80%; /* or whatever width for table*/
    height: 200px;
}

.theCell{
    display:table-cell;
    padding:0px 2px;
    white-space: pre; /* this will avoid line breaks*/    
    border:1px solid black;
    vertical-align: middle;
}
.bigCell{
    width:100%; /* this will shrink other cells */
}
.fixedCell {
    height: 40px;
    width: 70px;

}

有什么帮助吗？

fiddle :http://jsfiddle.net/80nmuxs8/4/

Answer 1

这里是修复

http://jsfiddle.net/80nmuxs8/5/

如果将要根据内容填充的单元格的宽度设置为1%，它会根据内容增长。

.bigCell 不需要宽度，因为它会占用剩余空间。

 .contentCell {width: 1%}