HTML/CSS: How to prevent a table cell with dashes to wrap?

October 12, 2022

I know my question looks pretty similar to this one: How to prevent text in a table cell from wrapping that was the first one I checked.

I have a table where I’ll be writting a long description in one column, and a date in the next colum. Browser thinks is super cool to wrap the columns with dates, since they are strings separated with dashes anyway. Currently I have something like:

| Description                | Date     |
|----------------------------|----------|
| This is a really long      | 2022-10- |
| description cell with many | 12       |
| lines...                   |          |

How can I tell the browser I want my description cell a bit shorter and the Date column not to wrap. In the solution I read it said you should use <td wrap="nowrap"> and that works… for spaces, but not for dashes.

Should I use non shrinking flex elements instead?

By making shorter the Description I mean:

| Description              | Date       |
|--------------------------|------------|
| This is a really long    | 2022-10-12 |
| description cell with    |            |
| many lines...            |            |

>Solution :

Just add white-space:nowrap to the css which keeps it all on one line. See below

table {
  border-collapse: collapse;
  width: 100px;
}

td {
  border: 1px solid gray;
  padding: 0.25rem 0.5rem;
}

td:last-child {
  white-space: nowrap;
}

<table>
  <tr>
    <td>Description</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>This is a really long description cell with many lines</td>
    <td>2022-10-12</td>
  </tr>
</table>