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

Posted

技术标签:

【中文标题】表格列,使用 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 需要获得相同的宽度。 您的问题似乎有所不同:听起来您的桌子比给定的宽度,对吗?在这种情况下,最初将为每列分配它们的宽度,然后将增加所有列的宽度以使其适合表格。因此,在您的情况下,宽度被视为最小宽度。这能回答你的问题吗?

以上是关于表格列,使用 css 设置最小和最大宽度的主要内容,如果未能解决你的问题,请参考以下文章

在表格table的中设置td最小宽度

使用 css 变量(没有 SASS/LESS)设置媒体查询的最小/最大宽度?

css中min-width和max-width的使用

CSS 表格列宽不适合某些屏幕尺寸

css设置宽度为100%减定值再求余

如何设置 select2 下拉菜单的最小宽度和最大宽度?