table-layout:fixed忽略td的最小宽度

Question

我有一个项目需要一个包含固定宽度和灵活宽度列的表.

无论浏览器的宽度如何,有些列的宽度始终必须为80px.

其余的列需要是一个灵活的宽度,但宽度相等,最小宽度为75px;

通过添加table-layout:fixed; 在表格中我可以得到灵活的宽度cols都具有相等的宽度,但是表格忽略了td的min-width属性.

如果我删除了table-layout:fixed,则min-width有效但灵活的宽度cols都有不同的宽度(基于它们包含的文本的长度).

列数根据从db中提取的数据而变化.

我在表格布局中放了一个表格示例:jsfiddle上的固定和最小宽度:http://jsfiddle.net/7d2Uj/

任何想法如何让min-width在这种情况下工作,或者为什么会这样？

Answer 1

我的解决方法是将表格挤压到几乎重叠的列,检查该点的表格宽度,并将<table>元素本身的最小宽度设置为该值.如果您使用一个可扩展列具有固定布局,则此技术也很有用,否则当窗口缩小时,扩展列将完全消失.

例如:http://jsfiddle.net/KTCfs/

Answer 2

您需要使用width, 而不是min-width固定宽度的列，并且您应该将剩余列的宽度设置为基于列数的百分比。在你的例子中，你有 6 列，所以我将其设置为16.66%。

工作示例： http: //jsfiddle.net/6vw66/