How to force HTML table row to show data in single row using CSS?

How can I force HTML table row data (data inside <td>) to show it in single line instead of multiple lines using CSS, for example take a look at the below image


I would like to solve this issue using CSS or javascript, thanks

Asked by:- jon
: 7821 At:- 6/18/2018 2:31:11 PM
HTML CSS row data in one line

2 Answers
profileImage Answered by:- pika

You can use white-space: nowrap on <td>, so your CSS code will be

td {overflow:hidden; white-space:nowrap}

If the above Code doesn't work, try to apply table-layout:fixed rule on the table

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

here is the similar working fiddle link

Basically, main property is <td> property white-space: nowrap, The white-space property specifies how white-space inside an element is handled.

And nowrap value of white-space means sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.

At:- 6/21/2018 6:05:51 PM
Excellent answer, white-space:nowrap works for me to force td to show complete data inside it. 0
By : jon - at :- 6/27/2018 8:51:58 AM

profileImage Answered by:- pika

The above answer work, as expected, but you can also try this CSS

td, th {
  white-space: nowrap;
  overflow: hidden;


At:- 8/27/2021 10:48:30 AM Updated at:- 8/27/2021 10:48:50 AM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use