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.

How to force HTML table row on a single line with CSS, we will look at in this article.

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

With CSS, we can use the table-layout: fixed property, to force HTML table row on a single line.
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.

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

Conclusion

With the help of CSS, we use the table-layout: fixed property, to force HTML table row on a single line.