如何使用 CSS 使表格單元格等寬？-css教學-PHP中文網

如何使用 CSS 使表格單元格等寬？

Barbara Streisand

發布： 2024-11-05 19:08:02

原創

238 人瀏覽過

How to Make Table Cells Equal Width Using 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>

登入後複製

是的，可以使用純CSS 來實現此目的.

其工作原理如下：
設定表格版面：固定；在父div 容器上。這會啟動表格佈局演算法，其中表格嘗試維持指定的尺寸。

為每個 div（表格儲存格）分配寬度。在本例中，我們將其設定為 2%，但您可以根據您的要求進行調整。

此寬度會觸發固定表格佈局行為，瀏覽器將平均分配寬度給每個單元格，確保無論內容大小如何，它們都具有相同的寬度。

附加說明：
此解決方案與 Chrome 和 IE8 相容。

請注意，macOS 上的 Safari 6 對表格佈局有不同的解釋：fixed;。這可能會導致在該瀏覽器中出現不同的結果。您可以為父 div（表格）設定固定寬度來控製表格的整體寬度。如果不指定寬度，則預設為 100%。

以上是如何使用 CSS 使表格單元格等寬？的詳細內容。更多資訊請關注PHP中文網其他相關文章！