CSS 是否可以控製表格單元格寬度而不管內容大小？

使用 CSS 控製表格單元格寬度

在 HTML 表格領域，在處理不同大小的內容時，確保表格單元格的寬度一致可能是一個挑戰。無論涉及多少個單元格，我們是否可以純粹透過 CSS 實現這一預期結果？

HTML 結構很簡單：父級

和用作表格容器，而子

用作表格容器。元素代表表格單元格。

<code class="html"><div style="display: table;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div></code>

CSS 可以用來解決這個問題。為了確保單元格寬度相等，無論內容大小如何，我們需要：

1. 觸發固定表格佈局機制：設定表格佈局：固定；在父級
   上。這指示瀏覽器強制執行指定的儲存格寬度，而不是根據內容自動調整它們。
2. 為表格單元格分配寬度：雖然不是強制性的，但分配一個小的寬度（例如，2 %) 到每個
   表示一個表格單元格作為固定表格佈局的觸發器。

   最終的 CSS 程式碼如下所示：

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

   透過這種方法，表格單元格將保持相等寬度，確保外觀一致，無論其內容為何。

以上是CSS 是否可以控製表格單元格寬度而不管內容大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！