How to force HTML table row on a single line with CSS?

Sometimes, we want to force HTML table row on a single line with CSS.

In this article, we’ll look at how to force HTML table row on a single line with CSS.

How to force HTML table row on a single line with CSS?

To force HTML table row on a single line with CSS, we use the table-layout: fixed property.

For instance, we write

table {
  table-layout: fixed;
}
td {
  overflow: hidden;
  white-space: nowrap;
}

to set table-layout to fixed to make the table cells’ widths fixed.

Then we use overflow: hidden; and white-space: nowrap; on the td elements to keep the cell content in 1 line and hide any overflow text.

Conclusion

To force HTML table row on a single line with CSS, we use the table-layout: fixed property.