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

HtmlCssLayout

Html Problem Overview


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

Html Solutions


Solution 1 - Html

You can use the CSS style white-space:

white-space: nowrap;

Solution 2 - Html

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.

Solution 3 - Html

Just add

style="white-space:nowrap;"

Example:

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

Solution 4 - Html

Use the nowrap style:

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

It's CSS!

Solution 5 - Html

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.

Solution 6 - Html

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

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

Solution 7 - Html

<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.

Solution 8 - Html

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

Solution 9 - Html

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionStevenView Question on Stackoverflow
Solution 1 - HtmlDavid MView Answer on Stackoverflow
Solution 2 - HtmlestaniView Answer on Stackoverflow
Solution 3 - HtmlHarun Or RashidView Answer on Stackoverflow
Solution 4 - HtmlDerek IllchukView Answer on Stackoverflow
Solution 5 - HtmlXanthirView Answer on Stackoverflow
Solution 6 - HtmlDan BreenView Answer on Stackoverflow
Solution 7 - HtmlMatovu RonaldView Answer on Stackoverflow
Solution 8 - HtmlRoger KeaysView Answer on Stackoverflow
Solution 9 - HtmlOlgaMaciaszekView Answer on Stackoverflow