在表列上伪造最小宽度

>标准HTML<table>标签，而在语义上进行表格数据的声音在控制色谱柱宽度方面提出了挑战，尤其是在具有不同单元格内容的动态环境中。 出现不一致之处：有些列可能会过度伸展，有些列被强制执行或相等的宽度，为富含内容的列牺牲了必要的空间。 本文详细详细介绍了CSS解决此问题的解决方案。 挑战：浏览器布局和列宽度<h3> </h3>>浏览器表布局在<p>> css属性上取决于<code>table-layout>（默认）或auto value。 fixed>使用

>，浏览器算法会在各列之间分布可用的宽度。

，相反，将可用的空间平均分配给列。table-layout: auto> table-layout: fixed>带有嵌套

元素的

元素允许指定列宽度，限制出现。 使用<colgroup></colgroup>，超过可用宽度会导致浏览器压缩列适合。 无论内容如何 <col>>理想情况下，table-layout: auto元素的Atable-layout: fixed属性将提供解决方案，从而使列可以扩展到最小值，但不会在其下方缩小。 但是，这不支持。

解决方法：模拟min-width<col>>

该解决方案涉及创造性模拟

行为。 这涉及添加一个空的min-width元素并使用属性。

>

考虑此HTML结构：min-width <col> 然后将CSS样式（从原始示例中替换内联样式）将应用于每个colspan>。 关键在于第一个

（例如指定宽度，例如200px）和随后的空

之间的关系。 使用

>，空列的空间被吸收，但是第一列的宽度保持固定，有效地产生了最小宽度。 第一列根据需要弯曲，水平滚动可容纳溢出。 （粘性定位可以增强第一列的行为。）

<col> <col> <col> <col> <col>

Project name		Amount	Date	Edit

>

>可访问性注意事项<col> <col>>可访问性测试（使用NVDA和VoiceOver）揭示了所有列均已宣布，甚至是空的。 虽然不是完美的优雅（第一列被宣布为两个），但并不会阻碍导航。 虽然空列上的<col>属性可能会改善这一点，但要记住ARIA不应弥补较差的HTML结构至关重要。

这个解决方法，虽然似乎是“黑客”，但提供了一个功能解决方案。 替代方法和潜在的用户体验含义是欢迎讨论点。

以上是在表列上伪造最小宽度的详细内容。更多信息请关注PHP中文网其他相关文章！