Hoe te maken: vergelijkingstabel

Hoe een vergelijkingstabel te maken

Eerste stap - Voeg HTML toe:

/* Font Awesome icoonbibliotheek */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table>
  <tr>
    <th style="breedte:50%">Functies</th>
    <th>Basis</th>
    <th>Pro</th>
  </tr>
  <tr>
    <td>Sample text</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Sample text</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
</table>

Tweede stap - Voeg CSS toe:

/* Tabelstijl instellen */
table {
  randinvalidering: valideren;
  randspatiëring: 0;
  breedte: 100%;
  rand: 1px vast #ddd;
{}
/* Stijl instellen voor tabelkop en tabelgegevens */
th, td {
  tekstuitlijning: midden;
  paddend: 16px;
{}
th:first-child, td:first-child {
  tekstuitlijning: links;
{}
/* Streepjespatroon tabelrij */
tr:nth-child(even) {
  achtergrondkleur: #f2f2f2;
{}
.fa-check {
  color: green;
{}
.fa-remove {
  color: red;
{}

Try it yourself