表格列,使用 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-width
s 没有 :
。修复该问题并将初始 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 设置最小和最大宽度的主要内容,如果未能解决你的问题,请参考以下文章