html - 表格列，使用 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 像素，它们的行为就像您在上面的网格中所说的那样。
只有当你试图给 table 一个太小的尺寸（小于 a.min+b.min+C 的内容）时它才会失败：然后 table 本身将比指定的更宽。

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

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>