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

Posted 2023-03-06

【中文标题】表格列，使用 css 设置最小和最大宽度

【英文标题】：Table columns, setting both min and max width with css

【发布时间】：2013-08-24 10:43:19

【问题描述】：

我想要一个表格，它在列中可以拉伸，但我在 css 中的最小和最大宽度方面遇到了一些问题。

似乎还有一些关于其工作原理的相互矛盾的答案：

最小/最大宽度应该可以工作：Prevent text from overlap table td width 不支持最小/最大宽度：Min-width and max-height for table attributes

我想要以下内容

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 设置实际渲染的表格：

【问题讨论】：

嗯，你的 CSS 中有语法错误：min-widths 没有 :。修复该问题并将初始 width 添加到 .a 和 .b，它似乎在我的 Chrome 29 中工作。

编辑：min-width 似乎可以在 Chrome 29 中使用，但 max-width 不能：jsfiddle.net/4b3RZ/9

@Passerby 是的，您对 : 的绝对正确（一定是错字）我已经在问题中更正了这一点。知道如何使最大宽度起作用吗？

【参考方案1】：

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

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

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

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

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>

【讨论】：

很好，完美运行！将单元格缩小到指定的 width 以下是没有意义的，但它们确实如此！谢谢。

请注意，以上不适用于固定布局表格。

我没有得到答案。为什么A大于C？不应该都是 14px 大吗？如果 A 为 16px，则意味着它从 C 中取出 2px 试图填充宽度所需的 20px。这不是 max-width 的工作方式。我将这个问题（和我的问题）理解为：“不要让单元格增长超过 Npx”，至少对于最大宽度而言。

@estani 表格与其他元素的工作方式不同。在这种情况下，A 和 B 应该分别得到 20 和 45 px，但 C 只会得到 5 px（从 70 px 中减去 A 和 B 剩下的）。由于文本宽于 5px，因此 C 被放大以使文本适合，而 A 和 B 被缩小以使整个表格保持在 70px。没有规定说 A 和 C 需要获得相同的宽度。

您的问题似乎有所不同：听起来您的桌子比给定的宽度宽，对吗？在这种情况下，最初将为每列分配它们的宽度，然后将增加所有列的宽度以使其适合表格。因此，在您的情况下，宽度被视为最小宽度。这能回答你的问题吗？