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

Question

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

score 2 · Accepted Answer · answered Oct 12 '22 at 17:22

2

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>

answered Oct 12 '22 at 17:22

Adam

5,495
2
7
24

1

Perfect, in fact after reading your answer I found this is done by `whitespace-nowrap` with tailwinds. I don't know why I used `space-nowrap". Thanks! – luisfer Oct 12 '22 at 17:24
1

It works! Thank you! – LUISAO Jun 10 '23 at 01:46

score 1 · Answer 2 · answered Oct 12 '22 at 17:18

1

You should use white-space: nowrap; for the date column. Not sure what you mean when you say you want the description cell shorter? just play with the width to get the desired outcome.

answered Oct 12 '22 at 17:18

Asher Moshav

109
5

As a style! Thanks! – luisfer Oct 12 '22 at 17:22

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

2 Answers2