如何使用 `` 和 CSS 在 HTML 中實現固定表格單元格寬度？

固定表格單元格寬度 - 揭秘

許多 Web 開發人員仍然使用表格來組織資料和控件，例如 jqGrid。然而，儘管單元格內容不同，jqGrid 強制執行固定列寬的能力卻帶來了一個有趣的難題。

秘密在於使用

。標籤，它允許開發人員為列定義表範圍的樣式。透過在 上設定 table-layout:fixed 樣式元素並為儲存格指定overflow:hidden樣式，表格採用固定佈局，防止儲存格擴展超出其定義的寬度。

例如，考慮以下HTML 代碼：

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

結合這段程式碼，下面的CSS保證了固定的表格佈局並防止單元格膨脹：

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

透過利用這種方式，開發者可以實現對錶格的精確控製表格單元格寬度，即使單元格內容不同，也能確保一致且有組織的外觀。

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