Last active
May 16, 2025 19:04
-
-
Save ninmonkey/9594d63c398de8561a92be9fd7e2952a to your computer and use it in GitHub Desktop.
Focing Html with 3 columns to `<table>` to share column widths
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><body> | |
| <table class="cols-3"> | |
| <tr> | |
| <th>Company</th> | |
| <th>Contact</th> | |
| <th>Country</th> | |
| </tr> | |
| <tr> | |
| <td>Alfreds Futterkiste</td> | |
| <td>Maria Anders</td> | |
| <td>Germany</td> | |
| </tr> | |
| <tr> | |
| <td>Centro comercial Moctezuma</td> | |
| <td>Francisco Chang</td> | |
| <td>Mexico</td> | |
| </tr> | |
| </table> | |
| <table class="cols-3"> | |
| <tr> | |
| <th>Ok</th> | |
| <th>No</th> | |
| <th>Yes</th> | |
| </tr> | |
| <tr> | |
| <td>Alfreds Futterkiste lorem ipsum dolor</td> | |
| <td>Maria Anders</td> | |
| <td>Germany</td> | |
| </tr> | |
| <tr> | |
| <td>Centro comercial Moctezuma</td> | |
| <td>Francisco Chang</td> | |
| <td>Mexico</td> | |
| </tr> | |
| </table> | |
| </body></html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* for the thread: <https://discord.com/channels/180528040881815552/447476117629304853/1372906036188676117> */ | |
| table.cols-3 { | |
| --total-width: 100%; | |
| /* toggle comment for 100% verses 80% width with center */ | |
| --total-width: 80%; | |
| --debug-width: 2px; | |
| /* toggle to show/hide column debugging colors */ | |
| --debug-width: 0; | |
| border: 2px solid blue; | |
| & :where(tr, td) { | |
| outline: 1px solid cyan; | |
| } | |
| /* border-collapse: */ | |
| margin: 1rem 0.5rem; | |
| /* auto center table if width < 100% */ | |
| margin: 1rem auto; | |
| width: var(--total-width); | |
| /* zebra */ | |
| & tr:nth-of-type(even){ | |
| background-color: #eee; | |
| } | |
| /* this could be simplified or dynamic */ | |
| & tr :where(td, th):nth-child(1) { | |
| outline: var(--debug-width) solid green; | |
| } | |
| & tr :where(td, th):nth-child(2) { | |
| outline: var(--debug-width) solid blue; | |
| } | |
| & tr :where(td, th):nth-child(3) { | |
| outline: var(--debug-width) solid red; | |
| } | |
| & tr :where(td, th):nth-child(1), | |
| & tr :where(td, th):nth-child(2), | |
| & tr :where(td, th):nth-child(3) { | |
| width: 33%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment