如何使用 CSS 设置表格列的宽度，以实现每列具有不同百分比的特定布局？-css教程-PHP中文网

如何使用 CSS 设置表格列的宽度，以实现每列具有不同百分比的特定布局？

Barbara Streisand

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

原创

479 人浏览过

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中文网其他相关文章！