Table with CSS3 Full

CSS3 Table Full

by Charles Butler

HTML

<link rel="stylesheet" href="https://graygrids.com/demos/snippets/startup-fw-pricing-table/assets/css/main.css">
<table class="table1">
  <thead>
    <tr>
      <th></th>
      <th class="first" scope="col" abbr="S">S</th>
      <th scope="col" abbr="P">P</th>
      <th scope="col" abbr="EP">EP</th>
      <th class="last" scope="col" abbr="E">E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" class="info first"><small>Track</small>Aqueduct</th>
      <td>7</td>
      <td></td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <th scope="row" class="info"><small>Race</small>8</th>
      <td>5</td>
      <td>1</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row" class="info"><small>Name</small>Blue Grass Stakes-G1</th>
      <td>4</td>
      <td>6</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row" class="info"><small>Condition</small>3-yo Colts</th>
      <td></td>
      <td>3</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row" class="info"><small>Length</small>9 Furlongs</th>
      <td><span class="check"></span></td>
      <td><span class="check"></span></td>
      <td><span class="check"></span></td>
      <td><span class="check"></span></td>
    </tr>
    <tr>
      <th scope="row" class="info last"><small>Purse</small>$500k</th>
      <td><span class="check"></span></td>
      <td><span class="check"></span></td>
      <td><span class="check"></span></td>
      <td><span class="check"></span></td>
    </tr>
  </tbody>
</table>

CSS

body {
  background: #FFF;
  padding: 8px;
}

table.table1 {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4em;
  font-style: normal;
  border-collapse: collapse;
  color: #000;
  text-align: left;
}

.table1 th.info {
  padding: 5px;
  color: #fff;
  font-weight: normal;
  font-size: 12px;

  text-shadow: 0px 1px 1px #555;
  background-color: #333;
  background: #333;
  border-radius: none;
  -moz-box-shadow: inset -5px 0 5px -6px #000;
  -webkit-box-shadow: inset -5px 0 5px -6px #000;
  box-shadow: inset -5px 0 5px -6px #000;
}

.table1 th.info.first {
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
}

.table1 th.info.last {
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-left-radius: 3px;
}
.table1 th.info small {
  display: block;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 8.8px;
  line-height: 0.8;
  letter-spacing: 1.1px;
  color: #139996;
  text-shadow: none;
}
.table1 thead th {
  padding: 10px 16px;
  color: #fff;
  text-align: center;
  text-shadow: 0px 1px 1px #555;
  border: 0px solid #93CE37;
  background-color: #9DD929;
  background: #139996;
  border-radius: none;
}

.table1 thead th.first {
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
}

.table1 thead th.last {
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
}

.table1 thead th:empty {
  background: transparent;
  border: none;
}

.table1 tfoot td {
  color: #9CD009;
  font-size: 32px;
  text-align: center;
  padding: 10px 0px;
  text-shadow: 1px 1px 1px #444;
}

.table1 tfoot th {
  color: #666;
}

.table1 tbody td {
  padding: 10px 16px;
  text-align: center;
  background-color: #efefef;
  border: 1px solid #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #666;
 ...