在CSS 中均衡表格單元格的寬度
在包含多個單元格的表格中,當每個單元格內的內容相同時,確保寬度相等可能具有挑戰性各不相同。當嘗試設定最大寬度時會出現此問題,因為它需要了解儲存格總數。
純CSS 解決方案
幸運的是,存在一個純CSS 解決方案
為了觸發替代表格計算演算法,我們為每個單元格分配一個較小的寬度(例如 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中文網其他相關文章!