如何在CSS中使表格單元格的寬度相等？

在CSS 中均衡表格單元格的寬度

在包含多個單元格的表格中，當每個單元格內的內容相同時，確保寬度相等可能具有挑戰性各不相同。當嘗試設定最大寬度時會出現此問題，因為它需要了解儲存格總數。

純CSS 解決方案

幸運的是，存在一個純CSS 解決方案

1. CSS 解決方案可均衡表格單元格的寬度，無論內容如何變化。此技術利用以下 CSS 屬性：
2. table-layout：fixed;：此屬性強製表格的固定佈局，確保單元格遵循指定的寬度。

每個單元格的寬度：

為了觸發替代表格計算演算法，我們為每個單元格分配一個較小的寬度（例如 2%）。

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

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

實現

此 CSS 將確保表格單元具有相同的寬度，即使內容不同。

相容性注意事項

表格佈局：固定；屬性在現代瀏覽器中得到廣泛支持，包括 Chrome 和 IE8 。然而，OS X 上的 Safari 6 以不同方式實現此屬性，可能會導致意外結果。作為預防措施，建議在各種瀏覽器上測試您的解決方案，以解決任何潛在的相容性問題。

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