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

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Request Pricing

Courses

How to Make Table Columns Equal Width With CSS

Resources:

Rocket Launch Your Career

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