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

Setting Table Column Width

This tutorial provides guidance on setting the width of table columns to achieve a desired layout. Consider the following table used as an inbox:

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

The goal is to allocate 15% of the page width to both the "From" and "Date" columns, while assigning 70% to the "Subject" column. Additionally, the table should span the entire page width.

Using the CSS width Property

To achieve this layout, the width CSS property of the col element can be used. This property allows for specifying the column width in pixels or as a percentage of the parent element's width.

Consider the following example with inline style attributes:

<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>

By specifying these widths, the table will occupy the full page width, and the columns will be proportionately sized according to the specified percentages. This approach allows for flexible column widths, even if the page width changes, ensuring a consistent layout.

The above is the detailed content of How can I set the width of table columns using CSS to achieve a specific layout with different percentages for each column?. For more information, please follow other related articles on the PHP Chinese website!