如何在 HTML 中建立固定寬度的表格單元格？-css教學-PHP中文網

如何在 HTML 中建立固定寬度的表格單元格？

Linda Hamilton

發布： 2024-12-17 13:44:15

原創

157 人瀏覽過

How Can I Create Fixed-Width Table Cells in HTML?

實現固定寬度的表格單元

一種流行的做法是在 Web 應用程式中使用表格進行佈局。然而，無縫地規定表格單元格的寬度似乎難以實現。這種現象通常歸因於內容的動態性質，導致單元格擴展超出定義的寬度。

為了應對這項挑戰，可靠的解決方案包括採用

。標籤與樣式屬性結合使用。透過指定表格的 table-layout:fixed 屬性，可以為其儲存格強制固定尺寸。此外，將溢位：隱藏樣式套用於個別儲存格可確保其內容不超過指定的寬度。

以下是展示此技術的程式碼範例：

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

登入後複製

table.fixed {
    table-layout: fixed;
}

table.fixed td {
    overflow: hidden;
}

登入後複製

透過實現透過這些措施，可以為表格單元建立固定寬度，從而確保無論內容長度如何，顯示一致。此方法使開發人員能夠更好地控製表格佈局，從而使資料呈現更具視覺吸引力和更有條理。

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