html5-表格列,使用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设置实际呈现的内容的表:

enter image description here

Luke McGregor asked 2020-01-14T06:52:46Z
1个解决方案
89 votes

表的工作方式不同; 有时违反直觉。

解决方案是在表单元格上使用width,而不是<table> <tr> <td class="a">A</td> <td class="b">B</td> <td class="c">C</td> </tr> </table>

虽然听起来像在那种情况下,像元不会收缩到给定的宽度以下,但实际上它们会收缩。
在不限制c的情况下,如果将表格的宽度设置为70px,则a,b和c的宽度分别为16、42和12像素。
表格宽度为400像素时,它们的行为就像您在上方的网格中所期望的那样。
只有当您尝试使表的大小过小(小于a.min + b.min + C的内容)时,它才会失败:然后表本身将比指定的宽。

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

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

Mr Lister answered 2020-01-14T06:54:39Z
translate from https://stackoverflow.com:/questions/18367959/table-columns-setting-both-min-and-max-width-with-css