361

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?

5 Answers 5

624

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.

6
  • 9
    doesnt work for input field and button in same cell. randomly places below.
    – IAmGroot
    Jan 9, 2012 at 16:01
  • 22
    Table element must have table-layout:fixed; in order for this to work.
    – daniloquio
    Aug 14, 2012 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 3, 2014 at 14:54
  • 1
    @Doomsknight I had the same issue with a checkbox and resolved it by updating the CSS with input { display: inline; } May 12, 2014 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, 2019 at 17:55
79
<th nowrap="nowrap">

or

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

or

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>
5
  • 9
    Note that nowrap has been deprecated. w3.org/TR/html401/struct/tables.html#h-11.2.6 . Use style sheets instead.
    – wisbucky
    Apr 6, 2016 at 22:13
  • Note. if used carelessly, this attribute may result in excessively wide cells. Oct 2, 2018 at 18:09
  • 5
    @wisbucky How does one "use style sheets"?
    – rogerdpack
    Apr 30, 2020 at 6: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 <w3schools.com/html/html_css.asp> Mar 2 at 13:03
  • 1
    @rogerdpack: what @wisbucky said applies only to the first example. nowrap attribute is deprecated and you should use css (or style) whitespace: nowrap instead
    – trogper
    Sep 13 at 10:48
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>
1
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

4
  • 2
    It is worth noting that the nobr tag is non-standard, as pointed out in the accepted answer linked in this answer: stackoverflow.com/a/8755071/4257
    – pkaeding
    Mar 9, 2015 at 2: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 9, 2015 at 2: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 9, 2015 at 2: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, 2021 at 8:02
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'}}>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.