How to prevent text in a table cell from wrapping

Question

Does anyone know how I can prevent the text in a table cell from wrapping? This is for the header of a table, and the heading is a lot longer than the data under it, but I need it to display on only one line. It is okay if the column is very wide.

The HTML of my (simplified) table looks like this:

<table>
  <thead>
    <tr>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
    </tr>
  </tbody>
</table>

The heading itself is wrapped in a div inside the th tag for reasons pertaining to the javascript on the page.

The table is coming out with the headings wrapping onto multiple lines. This seems to only happen when the table is sufficiently wide, as the browser is trying to avoid horizontal scrolling. In my case, though, I want horizontal scrolling.

Any ideas?

score 621 · Accepted Answer · edited Jan 31 '14 at 10:18

621

Have a look at the white-space property, used like this:

th {
    white-space: nowrap;
}

This will force the contents of <th> to display on one line.

From linked page, here are the various options for white-space:

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

edited Jan 31 '14 at 10:18

Jeroen

60,696
40
206
339

answered Nov 18 '08 at 21:43

Owen

82,995
21
120
115

9

doesnt work for input field and button in same cell. randomly places below. – IAmGroot Jan 09 '12 at 16:01
22

`Table` element must have `table-layout:fixed;` in order for this to work. – daniloquio Aug 14 '12 at 20:58
@Doomsknight Did you find a way to achieve it with an input field and another element in the same cell? – loveNoHate Jan 03 '14 at 14:54
white-space: pre; was what I needed as -28.04 was wrapping between the - and 28.04 – Brent Apr 08 '14 at 16:46
1

@Doomsknight I had the same issue with a checkbox and resolved it by updating the CSS with `input { display: inline; }` – Programster May 12 '14 at 11:17
1

it mess up the other cells, needs further fixing, i believe its incomplete solution as some other cells start overwriting – sairfan Jun 19 '19 at 17:55

score 79 · Answer 2 · answered Nov 18 '08 at 21:43

79

<th nowrap="nowrap">

or

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

or

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>

answered Nov 18 '08 at 21:43

Grant Wagner

25,263
7
54
64

9

Note that `nowrap` has been deprecated. https://www.w3.org/TR/html401/struct/tables.html#h-11.2.6 . Use style sheets instead. – wisbucky Apr 06 '16 at 22:13
**Note.** if used carelessly, this attribute may result in excessively wide cells. – ArifMustafa Oct 02 '18 at 18:09
5

@wisbucky How does one "use style sheets"? – rogerdpack Apr 30 '20 at 06:35
1

@rogerdpack I believe they might be referring to setting `white-space` to `nowrap` using the `style` attribute, you can use stylesheets by either setting the attribute inline, defining the stylesheet in the html itself, or defining the style in an external document as explained by this article – Dispensable Joe Mar 02 '23 at 13:03

score 26 · Answer 3 · edited Apr 18 '13 at 03:39

26

There are at least two ways to do it:

Use nowrap attribute inside the "td" tag:

<th nowrap="nowrap">Really long column heading</th>

Use non-breakable spaces between your words:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>

edited Apr 18 '13 at 03:39

Simon

33,714
21
133
202

answered Nov 18 '08 at 21:42

Sergey Golovchenko

18,203
15
55
72

9

Note that `nowrap` has been deprecated. https://www.w3.org/TR/html401/struct/tables.html#h-11.2.6 . Use style sheets instead. – wisbucky Apr 06 '16 at 22:13

cssyphus · Answer 4 · 2023-05-20T12:51:26.877

14

I came to this question needing to prevent text wrapping at the hyphen.

This is how I did it:

<td><nobr>Table Text</nobr></td>

Reference:

How to prevent line break at hyphens in all browsers

https://caniuse.com/?search=nobr

edited May 20 '23 at 12:51

answered Mar 08 '15 at 16:24

cssyphus

37,875
18
96
111

2

It is worth noting that the `nobr` tag is non-standard, as pointed out in the accepted answer linked in this answer: http://stackoverflow.com/a/8755071/4257 – pkaeding Mar 09 '15 at 02:08
Quite right. Your point is well received. I read all those comments, noted the experience of the corresponding commenters, and made a judgment call. The hyphen is a bit tricky. (Note: the question you linked in your comment is the same one I linked in my answer) – cssyphus Mar 09 '15 at 02:12
Yeah, it was meant to be the same question. I just wanted to be sure the caveat was posted here in case someone found this answer in the future, and didn't bother to read the linked reference. – pkaeding Mar 09 '15 at 02:14
1

Wow--weird one; thank you--I had the same issue with a date breaking to a newline after a hyphen – velkoon Apr 25 '21 at 08:02

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

0

For Use with React / Material UI

In case you're here wondering how this works for Material UI when building in React, here's how you add this to your <TableHead> Component:

<TableHead style={{ whiteSpace: 'nowrap'}}>

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 02 '20 at 18:36

Davis Jones

1,504
3
17
25

How to prevent text in a table cell from wrapping

5 Answers5

For Use with React / Material UI

Linked

Related