<table class="comparison-table">
  <thead>
    <tr>
      <th scope="col">Method</th>
      <th scope="col">Ease</th>
      <th scope="col">Performance</th>
      <th scope="col">Animation</th>
      <th scope="col">Pro's</th>
      <th scope="col">Con's</th>
    </tr>					
  </thead>
  <tbody>
    <tr>
      <th scope="row">border</th>
      <td><span class="rating rating--5">5</span></td>
      <td><span class="rating rating--1">1</span></td>
      <td><span class="rating rating--2">2</span></td>
      <td>
        <ul>
          <li>Easy</li>
        </ul></td>
      <td>
        <ul>
          <li>Bad performance</li>
          <li>Triggers layout and can move elements around</li>
          <li>Stepped transition due to browser rounding.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">outline</th>
      <td><span class="rating rating--5">5</span></td>
      <td><span class="rating rating--5">5</span></td>
      <td><span class="rating rating--3">3</span></td>
      <td>
        <ul>
          <li>Easy</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Stepped transition due to browser rounding</li>
          <li>Glitches in Safari</li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">clip-path</th>
      <td><span class="rating rating--2">2</span></td>
      <td><span class="rating rating--3">3</span></td>
      <td><span class="rating rating--5">5</span></td>
      <td>
        <ul>
          <li>Smooth transitions</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Potential for rounding errors</li>
          <li>Difficult to set up</li>
          <li>No IE/Edge support</li>
        </ul>
      </td>
    </tr>	
    <tr>
      <th scope="row">linear-gradient</th>
      <td><span class="rating rating--1">1</span></td>
      <td><span class="rating rating--4">4</span></td>
      <td><span class="rating rating--3">3</span></td>
      <td>
        <ul>
          <li>Smooth transitions in most browsers</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Stepped transition in Chrome</li>
          <li>Very difficult to set up</li>
          <li>No IE/Edge animation</li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">box-shadow</th>
      <td><span class="rating rating--4">4</span></td>
      <td><span class="rating rating--4">4</span></td>
      <td><span class="rating rating--4">4</span></td>
      <td>
        <ul>
          <li>Easy</li>
          <li>Smooth transitions in most browsers</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Stepped transition in Safari</li>
        </ul>
      </td>
    </tr>	
  </tr>
</tbody>
</table>

table {
  border-style: collapse;
  border-spacing: 0;
  width: 90%;
  max-width: 720px;
  margin: 0 auto;
}

th, td { 
  text-align: left; 
  //vertical-align: top; 
  padding: 0.75em 0.75em;
  margin: 0;
  border-bottom: solid 3px @border;
  border-left: dashed 1px fade(@border,50%);
}

th:first-child,
td:first-child {
  border-left: none;
}

th {
  font-weight: 700;
  white-space: nowrap;
}

thead { font-size: 0.85em; }
thead th { font-style: normal; }

td { 
  font-style: normal;
  font-weight: 400;
}

.rating {
  display: inline-block;
  text-indent: -0.5em;
  color: transparent;
  font-size: 0.8em;
  letter-spacing: 0.1em;
}

.rating:after { color: @border; }

.rating--1:after { content: '★'; }
.rating--2:after { content: '★★'; }
.rating--3:after { content: '★★★'; }
.rating--4:after { content: '★★★★'; }
.rating--5:after { content: '★★★★★'; }


ul {
  margin: 0;
  padding: 0;
  font-size: 0.85em;
}

li { 
  margin: 0 0 0.75em 1em; 
  padding: 0; 
  list-style-type: none;
  &:before { 
    content: '•';
    padding-right: 0.5em;
    margin-left: -1em;
  }
  
  &:last-child { margin-bottom: 0; }
}
View Compiled
Run Pen

External CSS

  1. https://codepen.io/shshaw/pen/f7548069c326e3c49d374144db9cb662

External JavaScript

This Pen doesn't use any external JavaScript resources.