您可以使用純 CSS 建立具有不同內容的等寬表格儲存格嗎？

具有可變內容的等寬表格單元格

考慮一個場景，其中表格容器內有多個表格單元格元素。儘管內容大小不同，但您希望這些表格單元格具有相同的寬度。是否有純 CSS 解決方案來實現此目的？

解決方案：

要實現等寬的表格單元格（無論內容大小如何），您可以使用以下CSS 方法:

1. 固定表格版面：套用表格版面：固定；到代表該表的父級div。這本質上是指示瀏覽器嚴格遵守指定的單元格寬度。
2. 最小單元格寬度：為每個單元格設定最小寬度，即使是像 2% 這樣的小寬度（div > ）分區）。這會觸發所需的表格佈局演算法，瀏覽器會嘗試遵循指定的儲存格尺寸。

程式碼範例：

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

div > div {
  display: table-cell;
  width: 2%;
}</code>

注意:

此解適用於Chrome、IE8 和Chrome、IE8 和Chrome、IE8 和Chrome、IE8 和Chrome、IE8 和Chrome Safari 6（有一些注意事項）。但是，請務必記住，與其他瀏覽器相比，Safari 6 可能具有不同的表格佈局行為。

以上是您可以使用純 CSS 建立具有不同內容的等寬表格儲存格嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！