CSS Tables: Simple table

by Kirubel Girma

HTML

<div class="sc-table">
<table class="zui-table">
  <thead>
    <tr>
      <th>English</th>
      <th>Correct (#)</th>
      <th>Correct (%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DeMarcus Cousins</td>
      <td>C</td>
      <td>6'11"</td>
    </tr>
    <tr>
      <td>Isaiah Thomas</td>
      <td>PG</td>
      <td>5'9"</td>
    </tr>
    <tr>
      <td>Ben McLemore</td>
      <td>SG</td>
      <td>6'5"</td>
    </tr>
    <tr>
      <td>Marcus Thornton</td>
      <td>SG</td>
      <td>6'4"</td>
    </tr>
    <tr>
      <td>Jason Thompson</td>
      <td>PF</td>
      <td>6'11"</td>
    </tr>
  </tbody>
</table>
<table class="zui-table">
  <thead>
    <tr>
      <th>Math</th>
      <th>Correct (#)</th>
      <th>Correct (%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DeMarcus Cousins</td>
      <td>C</td>
      <td>6'11"</td>
    </tr>
    <tr>
      <td>Isaiah Thomas</td>
      <td>PG</td>
      <td>5'9"</td>
    </tr>
    <tr>
      <td>Ben McLemore</td>
      <td>SG</td>
      <td>6'5"</td>
    </tr>
    <tr>
      <td>Marcus Thornton</td>
      <td>SG</td>
      <td>6'4"</td>
    </tr>
    <tr>
      <td>Jason Thompson</td>
      <td>PF</td>
      <td>6'11"</td>
    </tr>
  </tbody>
</table>
<table class="zui-table">
  <thead>
    <tr>
      <th>Reading</th>
      <th>Correct (#)</th>
      <th>Correct (%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DeMarcus Cousins</td>
      <td>C</td>
      <td>6'11"</td>
    </tr>
    <tr>
      <td>Isaiah Thomas</td>
      <td>PG</td>
      <td>5'9"</td>
    </tr>
    <tr>
      <td>Ben McLemore</td>
      <td>SG</td>
      <td>6'5"</td>
    </tr>
    <tr>
      <td>Marcus Thornton</td>
      <td>SG</td>
      <td>6'4"</td>
    </tr>
    <tr>
      <td>Jason Thompson</td>
      <td>PF</td>
      <td>6'11"</td>
    </tr>
  </tbody>
</table>
<table class="zui-table">
  <thead>
    <tr>
      <th>Science</th>
      <th>Correct (#)</th>
      <th>Correct (%)</th>
    </tr>
  </thead>
 ...

CSS

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
.sc-table {
  display: flex;
  flex-direction: row;
  width: '100%';
}