Make columns of equal width in ``

css

responsive-design

best-practices

accessibility

byAlex Kataev·Jan 15, 2025

Achieve equal widths in a <table> by using table-layout: fixed; and assigning consistent percentage widths with <col> tags. For instance, if you have a three-column table with equal widths, here's a handy set-up:

<style>
  /* Shamelessly stealing table space */
  table { table-layout: fixed; width: 100%; }
</style>

<table>
  <colgroup>
    /* Rule of thirds really applies well here, no? */
    <col style="width: 33%;">
    <col style="width: 33%;">
    <col style="width: 33%;">
  </colgroup>
  <!-- Put your awesome table rows and cells here -->
</table>

<col> takes up the width baton for its corresponding column, creating a finish line where all columns cross together.

The secret sauce: table-layout: fixed

table-layout: fixed; is like your magic wand waving uniform column widths into existence across your table, thanks to each cell getting the same width wish granted. If content starts elbowing its way out, it'll either have to play nice and wrap, or face the clipping consequence, courtesy of CSS properties like word-break or overflow.

Why go fixed?

Consistency is key: With content made irrelevant, your table maintains a steady appearance.
Need for speed: Only the first row dictates column widths, slashing rendering time.
Flexibility is a virtue: Changing column counts? Just tweak the percentage widths and you're golden.

Tackling dynamic content

When your brainchild table has to work with a changing number of columns, pairing up display: table-cell; with width: 100%; for the table can auto-magically adjust column widths to balance within the bounds.

/* Table: Also known as the master balloon-stretcher */
.my-table { display: table; width: 100%; }
.my-table-cell { display: table-cell; }

Sizing up to content

If your table's columns or contents are dynamic or content-generated, fluid design is not only a good-to-have but a must-have. Going down the percentage width path makes sure your columns stay uniform, regardless of column popularity or size.

Beauty in borders

border-collapse: collapse; gives your table a classy makeover, and uniform use of text-align: center; and vertical-align: middle; across your cells keep things neat and in line.

No-sweat management of equal-width columns

Adapting to updates like a champ

With table-layout: fixed; in your corner, you won't have to sweat over manual width recalculation when updates roll in. If a column hops on or off the bandwagon, just revise the <col> percentages and the table will do the auto-magic adjustment.

Harnessing code patterns for dynamism

Incorporate code patterns that make column counts change-friendly. By defining widths using CSS classes or inline styles within <col> tags, your table grows easy to maintain and eager to scale.

Making accessibility the VIP it is

Your tables should not just be pretty, they've got to be friendly too. Make them accessible by providing adequate contrast, giving headers proper associations, and using descriptive captions to assist users with assistive technologies.

explain-codes / Css / Make columns of equal width in ``

Linked

Equal sized table cells to fill the entire width of the containing table



How can I truncate table cells, but fit as much as content possible?



Fit cell width to content



Table overflowing outside of div



Using CSS td width absolute, position

