How to Make Table Columns Equal Width With CSS

Ferenc Almasi •

2021 July 17 •

1 min read

To keep each column of a table the same width in CSS, you only need to set the table-layout property to fixed, with a width set to 100%:

Copied to clipboard! Playground

<!-- Makes your table columns the same width -->
<style>
    table {
        table-layout: fixed;
        width: 100%;
    }
</style>

<table border="1">
    <tr>
        <th>...</th>
        <th>...</th>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

same-width.html

The example above, produces the following output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Ut enim ad minim veniam
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.	Excepteur sint occaecat cupidatat non proident

How to make table columns same width in CSS — If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS : best practices that can help you bring out the best from your styles.

Resources:

The table-layout property in CSS

Did you find this page helpful?

📚 More Webtips

Master the Art of Frontend

Access 100+ interactive lessons
Unlimited access to hundreds of tutorials
Prepare for technical interviews

Become a Pro

Courses

How to Make Table Columns Equal Width With CSS

Resources:

Courses

CSS - The Complete Guide (including Flexbox, Grid and Sass)

The HTML & CSS Bootcamp

The Creative HTML5 & CSS3 Course

Recommended

How to Truncate Text With Ellipsis in CSS

How to Vertically Write Text With CSS

How to Make Smooth Scrolling Using Only CSS