HTML Coding for Table |
HTML Coding for Table |
ksanchez |
Aug 11 2023, 01:52 PM
Post
#1
|
Group: Members Posts: 1 Joined: 11-August 23 Member No.: 29,017 |
I'm trying to code a table for a website page so it shows just the lines between rows. I want it very minimal.
The image on the left is what I want it to look like. The image on the right with all of the white divider lines is what it currently looks like. This is my current code: <style> .my-class { overflow: auto; width: 100%; } .my-class table { border: 1px solid #FFFFFF; height: 100%; width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 1px; text-align: left; } .my-class caption { caption-side: top; text-align: left; } .my-class th { border: 1px solid #FFFFFF; background-color: #2E2C39; color: #FFFFFF; padding: 5px; } .my-class td { border: 1px solid #FFFFFF; background-color: #2E2C39; color: #FFFFFF; padding: 5px; } </style> <div class="my-class" role="region" tabindex="0"> <table> <thead> <tr> <th>Media – Below The Line</th> <th>Media budget</th> <th>Data retuned to brand</th> </tr> </thead> <tbody> <tr> <td>Organic social and digital <br>(Brand owned accounts and sites only)</td> <td>No</td> <td>Yes</td> </tr> <tr> <td>PR / Events</td> <td>No</td> <td>No</td> </tr> <tr> <td>Internal use</td> <td>No</td> <td>No</td> </tr> <tr> <td>Archival/Historical use</td> <td>No</td> <td>No</td> </tr> </tbody> </table> </div> |
pandy |
Aug 11 2023, 02:33 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
You can specify the borders for the cells individually. You can do it different ways, below is one way. Just add the third line to what you have.
CODE .my-class td { border: 1px solid #FFFFFF; border-right: none; border-left: none; ... Do the same for th if you don't want vertical borders there either. |
Jason Knight |
Oct 10 2023, 04:40 PM
Post
#3
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
The image on the left is what I want it to look like. The image on the right with all of the white divider lines is what it currently looks like. What image? That said, where's your scope? Why are you using nothing but TD? Why are you declaring sizes in PX telling users with accessibility needs to go screw themselves? Why are you setting tabindex on a non-focusable element?!? Don't even get me STARTED about the pointless ARIA role junk. Let's fix the markup first: CODE <div class="my-class"> <table> <thead> <tr> <th scope="col">Media – Below The Line</th> <th scope="col">Media budget</th> <th scope="col">Data retuned to brand</th> </tr> </thead> <tbody> <tr> <th scope="row">Organic social and digital <br>(Brand owned accounts and sites only)</th> <td>No</td> <td>Yes</td> </tr><tr> <th scope="row">PR / Events</th> <td>No</td> <td>No</td> </tr><tr> <th scope="row">Internal use</th> <td>No</td> <td>No</td> </tr><tr> <th scope="row">Archival/Historical use</th> <td>No</td> <td>No</td> </tr> </tbody> </table> </div> But with no images, I can only assume @callmestarfire is close to what you want... just swap out the PX junk for EM or REM. |
Lo-Fi Version | Time is now: 28th May 2024 - 08:48 AM |