How to Precisely Control Column Width in HTML Table Structures Using CSS?

Setting Column Width in Table Structures

In various web development scenarios, it becomes necessary to precisely control the width of table columns for optimal presentation. Let's consider the following simple HTML table used as an inbox:

<code class="html"><table border="1">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table></code>

Our goal is to set the width of the From and Date columns to 15% of the page width, while the Subject column occupies the remaining 70%. Additionally, we want the table itself to stretch across the entire page width.

To address this, we can utilize the CSS width property within the col element. This property allows us to specify the width of individual columns using different units, including pixels or percentages.

<code class="html"><table style="width: 100%">
    <colgroup>
        <col span="1" style="width: 15%;">
        <col span="1" style="width: 70%;">
        <col span="1" style="width: 15%;">
    </colgroup>

    <!-- Table body and rows -->
</table></code>

In this example, we create a set of three col elements within a colgroup container. Each col element represents a table column and is assigned its desired width using inline CSS styles. By specifying percentages, the column widths adapt proportionally to the overall table width.

The above is the detailed content of How to Precisely Control Column Width in HTML Table Structures Using CSS?. For more information, please follow other related articles on the PHP Chinese website!