表列，用CSS设置最小和最大宽度

我想有一个在列中可以伸展的表格，但是我在CSS中的最小和最大宽度有点麻烦。

这似乎也有一些相互矛盾的答案围绕如何工作：

• 最小/最大宽度应该工作： 防止重叠表td宽度的文本
• 最小/最大宽度不受支持： 表格属性的最小宽度和最大高度

我想有以下几点

table{ width:100%; } .a, .b, .c { background-color: red; } .a { min-width: 10px; max-width: 20px; } .b { min-width: 40px; max-width: 45px; } .c { } <table> <tr> <td class="a">A</td> <td class="b">B</td> <td class="c">C</td> </tr> </table> 

有没有一种方法来实现这个没有JavaScript （即约束拉伸与列表）？

• 我只需要这个使用CSS3 + HTML5
• 一个jsfiddle东西不扩大： http : //jsfiddle.net/4b3RZ/10/
• 如果我只设置列的最小宽度我得到一个成比例的拉伸： http : //jsfiddle.net/4b3RZ/8/

下面是一个实际得到的一些不同的CSS设置的表格：

Answer 1

表格工作不同; 有时与直觉相反。

解决方法是使用表格单元格max-width ，而不是max-width 。

虽然听起来像这种情况下，单元格不会缩小到给定的宽度以下，但实际上，
对c没有任何限制，如果给出的表格宽度为70px，则a，b和c的宽度将分别为16,42和12像素。
表格宽度为400像素，它们的行为就像您在上面的网格中所说的那样。
只有当你试图给表太小的尺寸（小于a.min + b.min + C的内容）时，它会失败：那么表格本身会比指定的更宽。

我做了一个新的小提琴 ，其中我删除了所有边框和填充以及边框间距，因此您可以更准确地测量宽度。