如何為收件匣樣式佈局設定表格中的列寬？

設定表格列寬度

建立一個具有視覺吸引力和功能性的表格通常需要自訂其列的寬度。對於基本收件匣樣式的表格，目標是為「寄件者」、「主題」和「日期」欄位設定特定寬度，確保它們佔據頁面寬度的不同百分比。

為了實現此自定義，CSS width 屬性 與 col 元素 結合使用。此元素位於 colgroup 元素內，定義列佈局。透過為每一列分配一個寬度值，我們可以控制其大小。

以下是使用內嵌CSS 屬性的範例：

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Column headers (<thead>) and body rows (<tbody>) go here -->
    <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>

此程式碼片段將表格設定為佔據整個頁面寬度，同時定義具有特定百分比的三列：

• 「來自」：頁寬的15%
• 「主題」：頁寬的70%
• 「日期」：頁寬的15%

以上是如何為收件匣樣式佈局設定表格中的列寬？的詳細內容。更多資訊請關注PHP中文網其他相關文章！