表格列,使用css设置最小和最大宽度

Question

我希望有一个表可以在列中伸展但我在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

表的工作方式不同 有时候反直觉.

解决方案是width在表格上使用而不是max-width.

虽然在这种情况下可能听起来细胞不会收缩到给定宽度以下,但实际上它们会收缩.
对c没有限制,如果你给表格宽度为70px,a,b和c的宽度分别为16,42和12像素.
如果表格宽度为400像素,它们的行为就像您在上面的网格中所说的那样.
只有当你试图给表太小时(小于a.min + b.min + C的内容)它才会失败:那么表本身将比指定的更宽.

我根据你的小提琴制作了一个片段,我删除了所有的边框和填充以及边框间距,这样你就可以更准确地测量宽度.

table {
  width: 70px;
}

table, tbody, tr, td {
  margin: 0;
  padding: 0;
  border: 0;
  border-spacing: 0;
}

.a, .c {
  background-color: red;
}

.b {
  background-color: #F77;
}

.a {
  min-width: 10px;
  width: 20px;
  max-width: 20px;
}

.b {
  min-width: 40px;
  width: 45px;
  max-width: 45px;
}

.c {}

<table>
  <tr>
    <td class="a">A</td>
    <td class="b">B</td>
    <td class="c">C</td>
  </tr>
</table>