Home > Web Front-end > CSS Tutorial > How to Set Table Column Width Using CSS?

How to Set Table Column Width Using CSS?

Mary-Kate Olsen
Release: 2024-10-31 13:09:02
Original
867 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template