如何使用 CSS 設定表格列的寬度，以實現每個欄位具有不同百分比的特定佈局？-css教學-PHP中文網

如何使用 CSS 設定表格列的寬度，以實現每個欄位具有不同百分比的特定佈局？

Barbara Streisand

發布： 2024-10-27 14:37:01

原創

478 人瀏覽過

How can I set the width of table columns using CSS to achieve a specific layout with different percentages for each column?

設定表格列寬度

本教學提供設定表格列寬度以實現所需版面的指導。考慮將下表用作收件匣：

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

登入後複製

目標是將頁寬的15% 分配給「寄件者」和「日期」列，同時將70% 分配給「主體」柱子。此外，表格應跨越整個頁面寬度。

使用 CSS width 屬性

要實現此佈局，可以使用 col 元素的 width CSS 屬性。此屬性允許指定列寬（以像素為單位）或父元素寬度的百分比。

請考慮以下具有內聯樣式屬性的範例：

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;"></col>
       <col span="1" style="width: 70%;"></col>
       <col span="1" style="width: 15%;"></col>
    </colgroup>

    <thead>
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

登入後複製

透過指定這些寬度，表格將佔據整個頁面寬度，並且列將根據指定的百分比按比例調整大小。這種方法允許靈活的列寬，即使頁面寬度發生變化，也能確保佈局一致。

以上是如何使用 CSS 設定表格列的寬度，以實現每個欄位具有不同百分比的特定佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！