How do I set the table cell widths to minimum except last column?

html

responsive-design

css

table-layout

byNikita Barsukov·Feb 13, 2025

Implement minimum width table cells with an auto-expanding last column, by applying the CSS properties width: 1% and white-space: nowrap to all the cells, leaving the last column unset. In this way, cells will shrink to the size of their content, whilst the last column will expand to the remaining space. Here is the quick CSS snippet:

td:not(:last-child) { 
  /* Keeping it tight, just essentials */
  white-space: nowrap; 
  width: 1%; 
}

td:last-child { 
  /* I'll take the rest, thank you very much */
  width: auto; 
}

Apply these styles to your <td> elements and let the magic happen.

Deep dive into HTML table layouts

A solid understanding of HTML provides the key to effective modifications in table layouts. Use the table-layout: fixed property to ensure that the column widths are consistent, and to totally annihilate unexpected wrapping when the content dares to exceed the available space.

Detailed customization with CSS

Dig deeper into the intricacies of our fast answer and learn to address different content and design needs for total domination over your table definitions:

Break the chains of content overflow

Include the white-space: nowrap to css cells that scream - "I refuse to break my text, freedom for the words". This results in single-line text, standing resolute and unbroken.

Enjoy the stretch in last column

Set the width style to auto for the last column, an equivalent of saying, "Relax, buddy, stretch your legs, use any space the others didn't". Hence, the browser allocates all remaining free spaces to this column.

Even Steven

Ensure that beauty prevails by adding border-collapse: collapse to your table styling, providing a clean design that even Marie Kondo would be proud of.

table {
  /* Occupying full real estate here */
  width: 100%; 
  border-collapse: collapse; /* Better together. No, not you cell borders! */
}

Don't compromise user experience

When formulating your grand table designs, keep accessibility right up there in your list of priorities. A table isn't just a tool of visual sorting but also of communication - make sure everyone can read it without difficulties.

Further complex-based scenarios

As you climb further up the ladder of mastery, consider delving into these advanced areas:

The key to clarity: Padding

Increase the reading experience significantly by styling some padding in your <td> elements. This keep the content from getting uncomfortably close to cell borders:

td {
  /* Freedom! */
  padding: 5px;
}

Control column amounts dynamically

For the days when you're dealing with an unpredictable number of columns, :nth-child or :not(:last-child) CSS selectors could become your best friends, allowing for incredibly precise column styling.

Fancy a bit of LaTeX?

Depending on the complexity of your tables, leaning towards LaTeX-like table functionalities can give you some more staggering formatting options.

Optimizing tables for a responsive design

When working in a responsive environment, you need your last column to adapt accordingly. Some tips for this are to make the most out of media queries or percentage-based widths. On smaller screens, employing min-widths can prevent the columns from shrinking beyond recognition.

Experiment by debugging in jsFiddle

Test your designs by interacting with them in real-time on platforms such as jsFiddle, a truly fail-proof way of ensuring that you're on the right track to incredible tables.