HTML Coding for Table Options

[ksanchez]

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]

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]

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.