Commit 38329bd
doc: prevent tables from shrinking page
Tables on some pages (e.g. https://nodejs.org/api/crypto.html) are
quite wide because of long content (e.g. URLs) that don't break.
With this change, cell padding is smaller on small screens, and the
table content is allowed to break.
PR-URL: #31859
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
Reviewed-By: James M Snell <jasnell@gmail.com>1 parent fa376f4 commit 38329bd
1 file changed
Lines changed: 17 additions & 1 deletion
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -251,14 +251,30 @@ table { | |||
| 251 | 251 | th, | |
| 252 | 252 | td { | |
| 253 | 253 | border: 1px solid #aaa; | |
| 254 | - padding: .75rem 1rem; | ||
| 254 | + padding: .5rem; | ||
| 255 | 255 | vertical-align: top; | |
| 256 | 256 | } | |
| 257 | 257 | ||
| 258 | 258 | th { | |
| 259 | 259 | text-align: left; | |
| 260 | 260 | } | |
| 261 | 261 | ||
| 262 | + td { | ||
| 263 | + word-break: break-all; /* Fallback if break-word isn't supported */ | ||
| 264 | + word-break: break-word; | ||
| 265 | + } | ||
| 266 | + | ||
| 267 | + @media only screen and (min-width: 600px) { | ||
| 268 | + th, | ||
| 269 | + td { | ||
| 270 | + padding: .75rem 1rem; | ||
| 271 | + } | ||
| 272 | + | ||
| 273 | + td:first-child { | ||
| 274 | + word-break: normal; | ||
| 275 | + } | ||
| 276 | + } | ||
| 277 | + | ||
| 262 | 278 | ol, | |
| 263 | 279 | ul, | |
| 264 | 280 | dl { | |
0 commit comments