How to Set Table Column Width Using CSS?

Setting Table Column Width

Tables are commonly used to present tabular data, but adjusting column widths can be essential for ensuring readability and proper alignment. In this article, we will explore how to set the width of table columns using CSS.

Method Using the CSS Width Property

The width of a table column can be set using the width property of the col element. The width value can be specified in pixels (e.g., width: 200px;) or as a percentage of the parent element's width (e.g., width: 50%;).

Example with Inline Style Attribute:

This example uses inline style attributes within a col element to set the widths of three columns:

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

    <!--- ... remaining table elements ---->
</table></code>

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