How to prevent table cells with dashes from wrapping in HTML/CSS?

Question

I know my question looks very similar to this one: How to prevent text wrapping in table cells, this was the first one I checked.

I have a table and in one of the columns I will write a long description and the next column is the date. Browsers think it's cool to wrap date columns because they are dash-separated strings. Currently I have something like this:

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

How do I tell the browser that I want my description cells to be slightly shorter and the date column not to wrap. In the solution I read, it said you should use , which works for spaces but not dashes.

Should I use non-shrinking flex elements?

---

By shortening the description, I mean:

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

Answer 1

You should use white-space: nowrap; for date columns. I'm not sure what you mean when you say you want the description cells to be shorter? Just adjust the width to get the desired result.

Answer 2

Just add white-space:nowrap in your CSS and it will make everything appear 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>