πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Make Table Columns Equal Width With CSS

How to Make Table Columns Equal Width With CSS

Ferenc Almasi β€’ Last updated 2021 July 17 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

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 CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

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:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.