如何为收件箱样式布局设置表格中的列宽？

设置表格列宽度

创建一个具有视觉吸引力和功能性的表格通常需要自定义其列的宽度。对于基本收件箱样式的表格，目标是为“发件人”、“主题”和“日期”列设置特定宽度，确保它们占据页面宽度的不同百分比。

为了实现此自定义，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中文网其他相关文章！