How to prevent line-break in a column of a table cell (not a single cell)?

Question

How can I prevent automatic line breaks in a column of table (not a single cell)?

score 312 · Answer 1 · answered Dec 12 '09 at 15:31

312

You can use the CSS style white-space:

white-space: nowrap;

answered Dec 12 '09 at 15:31

David M

71,481
13
158
186

4

I want to prevent line-break in a column of a table, not a single cell. – Steven Dec 12 '09 at 15:40
15

So add it to every cell in the column? – David M Dec 12 '09 at 15:42
Add a class to every td cell you want this to apply to, if you don't want it applied to every cell in the table, but just specific ones. – James Black Dec 12 '09 at 15:46
I want to apply it to all cells of the same column. – Steven Dec 12 '09 at 15:48
Is there an easy way to do it? – Steven Dec 12 '09 at 15:55
9

You can apply this rule along with the nth child selector http://css-tricks.com/how-nth-child-works/ – Zach Lysobey Mar 14 '12 at 14:33
In case you were wondering, this CSS property works everywhere. http://www.quirksmode.org/css/whitespace.html – Damien Dec 19 '12 at 17:13

estani · Answer 2 · 2013-10-18T08:54:06.593

44

For completion sake:

#table_id td:nth-child(2)  {white-space: nowrap;}

Is used for applying a style to the 2 column of the table_id table.

This is supported by all major Browsers, IE started supporting this from IE9 onwards.

edited Oct 18 '13 at 08:54

answered Apr 24 '12 at 13:48

estani

24,254
2
93
76

score 30 · Answer 3 · answered Sep 22 '18 at 03:35

30

Just add

style="white-space:nowrap;"

Example:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>

answered Sep 22 '18 at 03:35

Harun Or Rashid

312
3
7

1

Wouldn't this apply to the entire table (i.e. _ALL_ columns) and not just an individual column? – Joshua Pinter Jan 29 '20 at 23:01

score 21 · Answer 4 · answered Dec 12 '09 at 15:31

21

Use the nowrap style:

<td style="white-space:nowrap;">...</td>

It's CSS!

answered Dec 12 '09 at 15:31

Derek Illchuk

5,638
1
29
29

1

I want to prevent line-break in all cells of the same column. – Steven Dec 12 '09 at 15:49

score 18 · Answer 5 · edited May 17 '12 at 17:42

There are a few ways to do this; none of them are the easy, obvious way.

Applying white-space:nowrap to a <col> won't work; only four CSS properties work on <col> elements - background-color, width, border, and visibility. IE7 and earlier used to support all properties, but that's because they used a strange table model. IE8 now matches everyone else.

So, how do you solve this?

Well, if you can ignore IE (including IE8), you can use the :nth-child() pseudoclass to select particular <td>s from each row. You'd use td:nth-child(2) { white-space:nowrap; }. (This works for this example, but would break if you had any rowspans or colspans involved.)

If you have to support IE, then you've got to go the long way around and apply a class to every <td> that you want to affect. It sucks, but them's the breaks.

In the long run, there are proposals to fix this lack in CSS, so that you can more easily apply styles to all the cells in a column. You'll be able to do something like td:nth-col(2) { white-space:nowrap; } and it would do what you want.

score 17 · Answer 6 · answered Dec 12 '09 at 15:33

17

<td style="white-space: nowrap">

The nowrap attribute I believe is deprecated. The above is the preferred way.

answered Dec 12 '09 at 15:33

Dan Breen

12,626
4
38
49

score 8 · Answer 7 · edited Aug 21 '19 at 15:36

<table class="blueTable">
  <tr>
     <td>My name is good</td>
   </tr>
</table> 
<style>   
    table.blueTable td,
    table.blueTable th {
        white-space: nowrap;
        /* non-question related further styling */
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
        text-align: left;
    }
</style>

This is an example usage of the white space property with value nowrap, the bluetable is the class of the table, below the table are the CSS styles.

score 5 · Answer 8 · answered Jun 04 '13 at 03:58

5

Put non-breaking spaces in your text instead of normal spaces. On Ubuntu I do this with (Compose Key)-space-space.

answered Jun 04 '13 at 03:58

Roger Keays

3,117
1
31
23

score 5 · Answer 9 · answered Aug 19 '17 at 16:21

5

To apply it to the entire table, you can place it within the table tag:

<table style="white-space:nowrap;">

answered Aug 19 '17 at 16:21

OlgaMaciaszek

3,662
1
28
32

How to prevent line-break in a column of a table cell (not a single cell)?

9 Answers9

Linked