How to set table columns to have auto width with CSS?

Spread the love

Sometimes, we want to set table columns to have auto width with CSS.

In this article, we’ll look at how to set table columns to have auto width with CSS.

How to set table columns to have auto width with CSS?

To set table columns to have auto width with CSS, we set the white-space property.

For instance, we write

<tr>
  <td class="fit-width">ID</td>
  <td>Description</td>
  <td class="fit-width">Status</td>
  <td>Notes</td>
</tr>

to add the table.

Then we write

td.fit-width {
  width: 100px;
  white-space: nowrap;
}

to add white-space: nowrap; to make the text wrap if it overflows the width in each cell.

Conclusion

To set table columns to have auto width with CSS, we set the white-space property.

Leave a Reply

Your email address will not be published. Required fields are marked *