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 Should I use non-shrinking flex elements? By shortening the description, I mean: , which works for spaces but not dashes.
| Description | Date | |--------------------------|---------------------| | This is a really long | 2022-10-12 | | description cell with | | | many lines... | |
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.Just addwhite-space:nowrapin your CSS and it will make everything appear on one line. See
belowtable { border-collapse: collapse; width: 100px; } td { border: 1px solid gray; padding: 0.25rem 0.5rem; } td:last-child { white-space: nowrap; }