I want table cells to follow a vertical rhythm of 20px, regardless of the font size.
Table cells should be 20px tall.
Table cells are expanded in height arbitrarily based on the font size.
overflow: hidden has no effectfont-size to 14px solves the issue| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>table + line-height</title> | |
| <style type="text/css"> | |
| * { | |
| box-sizing: border-box; | |
| font: normal 16px/20px Helvetica, Arial, Verdana, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| table td { | |
| height: 20px; | |
| line-height: 20px; | |
| } | |
| #grid { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 999; | |
| pointer-events: none; | |
| background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(120,120,120,0.1) 51%, rgba(120,120,120,0.1) 100%); | |
| background: repeating-linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50% , rgba(120,120,120,0.1) 51%, rgba(120,120,120,0.1) 100%); | |
| background-size: 100px 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <td>@colorHeavyweight</td> | |
| <td>#101830</td> | |
| </tr> | |
| <tr> | |
| <td>@colorMiddleweight</td> | |
| <td>#213366</td> | |
| </tr> | |
| <tr> | |
| <td>@colorWelterweight</td> | |
| <td>#3A57AB</td> | |
| </tr> | |
| <tr> | |
| <td>@colorLightweight</td> | |
| <td>#6F8AD7</td> | |
| </tr> | |
| <tr> | |
| <td>@colorBantamweight</td> | |
| <td>#C6CFEB</td> | |
| </tr> | |
| <tr> | |
| <td>@colorNeutralHeavyweight</td> | |
| <td>#434343</td> | |
| </tr> | |
| <tr> | |
| <td>@colorNeutralMiddleweight</td> | |
| <td>#999999</td> | |
| </tr> | |
| <tr> | |
| <td>@colorNeutralSkinny</td> | |
| <td>#DDDDDD</td> | |
| </tr> | |
| <tr> | |
| <td>@colorGood</td> | |
| <td>#57AB3A</td> | |
| </tr> | |
| <tr> | |
| <td>@colorBad</td> | |
| <td>#AB3A57</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div id="grid"></div> | |
| </body> | |
| </html> |