首頁 > web前端 > css教學 > 主體

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

DDD
發布: 2024-10-30 01:54:02
原創
248 人瀏覽過

How to Set Column Widths in a Table for an Inbox-Style Layout?

設定表格列寬度

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

為了實現此自定義,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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!