如何使用 CSS 使表格单元格等宽？

使用 CSS 的等宽表格单元格

问题：

我们如何制作一个不确定的表格容器中的表格单元格元素数量具有相同的宽度，无论其内容大小如何？

答案：

是的，可以使用纯 CSS 来实现此目的.

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment */
}</code>

其工作原理如下：

1. 设置表格布局：固定；在父 div 容器上。这会激活表格布局算法，其中表格尝试维持指定的尺寸。
2. 为每个 div（表格单元格）分配宽度。在本例中，我们将其设置为 2%，但您可以根据您的要求进行调整。
3. 此宽度会触发固定表格布局行为，浏览器将平均分配宽度给每个单元格，确保无论内容大小如何，它们都具有相同的宽度。

附加说明：

• 此解决方案与 Chrome 和 IE8 兼容。
• 请注意，macOS 上的 Safari 6 对表格布局有不同的解释：fixed;。这可能会导致在该浏览器中出现不同的结果。
• 您可以为父 div（表格）设置固定宽度来控制表格的整体宽度。如果不指定宽度，则默认为 100%。

以上是如何使用 CSS 使表格单元格等宽？的详细内容。更多信息请关注PHP中文网其他相关文章！