Aeroplankton Enthusiasts Society

Intangible Products for an Ephemeral World

Simple, Minimal Table Style

Posted on 2016.08.03 by Aeroplankton Enthusiast

For those who’ve need of a fairly simple, bare-bones, semi-transparent, monochromatic, print-friendly table style with minimal html markup and just enough sprinkled in to be respectable.

Simple CSS Table in Chrome v70
Simple CSS Table in Firefox v64
Simple CSS Table in Internet Explorer v11

The CSS:

table {
 font: 1em/1.6em sans-serif;
 border-collapse: collapse;
 border-spacing: 0;
}
th, td {
 padding: 0 .4em;
 text-align: left;
 border-bottom: rgba(187,187,187,0.6) solid 1px;
}
thead th, thead td { border-bottom: rgba(187,187,187,0.6) solid 2px; }
tfoot th, tfoot td { border-top: rgba(187,187,187,0.6) double 4px; }
tbody th {
 font-weight: normal;
 border-right: rgba(187,187,187,0.6) solid 1px;
}
table a { text-decoration: none; }
tr:nth-child(even) { background: rgba(187,187,187,0.15) none; }

The HTML:

<table>
<thead>
 <tr>
 <th>Column One</th>
 <th>Column Two</th>
 <th>Column Three</th>
 <th>Column Four</th>
 <th>Column Five</th>
 </tr>
</thead>
<tbody>
 <tr>
 <th>Row One</th>
 <td>Data Two</td>
 <td>Data Three</td>
 <td>Data Four</td>
 <td>Data Five</td>
 </tr>
 <tr>
 <th>Row Two</th>
 <td>Data Two</td>
 <td>Data Three</td>
 <td>Data Four</td>
 <td>Data Five</td>
 </tr>
 <tr>
 <th>Row Three</th>
 <td>Data Two</td>
 <td>Data Three</td>
 <td>Data Four</td>
 <td>Data Five</td>
 </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="3"></td>
        <td>Total Four</td>
        <td>Total Five</td>
    </tr>
</tfoot>
</table>
Posted in Scraps & Snippits and tagged , . Permalink.
© 2024 Aeroplankton Enthusiasts Society, All rights reserved.