πŸŽ„ Get 50% off from our JavaScript course for the holidays! πŸŽ„
How to Make Table Columns Equal Width With CSS

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

<!-- 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
Copied to clipboard!

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
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course
10 Best Practices for Quickly Improving Your CSS

Resources:

JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended

πŸŽ‰ Thank you for subscribing to our newsletter. x