Table with CSS3

CSS3 Table

by Charles Butler

HTML

<link rel="stylesheet" href="https://graygrids.com/demos/snippets/startup-fw-pricing-table/assets/css/main.css">
<section id="pricing-table">
  <div class="container">
    <div class="row">
      <div class="pricing">

        <div class="col-md-4 col-sm-12 col-xs-12">
          <div class="pricing-table">
            <div class="pricing-header">
              <p class="pricing-title">Aqueduct Race 3</p>
              <p class="pricing-rate"><sup>$</sup> 500k <span>Purse</span></p>
            </div>

            <div class="pricing-list">
              <ul>
              <li><i class="fa fa-envelope"></i><span>Name</span> Blue Grass Stakes-G1</li>
                <li><i class="fa fa-signal"></i><span>Condition</span> 3yo Fillies</li>
                <li><i class="fa fa-user"></i><span>Length</span> 9 Furlongs</li>
                <li><i class="fa fa-smile-o"></i>first 10 day free</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<table class="tbl">
  <tbody>
    <tr>
      <th style="text-align: center;">Race</th>
      <th style="text-align: center;">Track</th>
      <th style="text-align: center;">Name</th>
      <th style="text-align: center;">Condition</th>
      <th style="text-align: center;">Length</th>
      <th style="text-align: center;">Purse</th>
    </tr>
    <tr>
      <td style="text-align: center;">6</td>
      <td style="text-align: center;">Keeneland</td>
      <td style="text-align: center;">Ashland-G1</td>
      <td style="text-align: center;">3-yo Fillies</td>
      <td style="text-align: center;">1 1/16 miles</td>
      <td style="text-align: center;">$500k</td>
    </tr>
  </tbody>
</table>

CSS

body {
  background: #FFF;
}

table.tbl {
  width: 100%;
  padding: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  border-radius: 4px;
}

table.tbl th {
  text-align: center;
  border: 1px solid #139996;
  background: #139996;
  color: #fff;
  margin: 0;
}

table.tbl th:first-child {
  text-align: center;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
  border: 1px solid #139996;
  background: #139996;
  color: #fff;
}

table.tbl th:last-child {
  text-align: center;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  border-top-right-radius: 4px;
  border: 1px solid #139996;
  background: #139996;
  color: #fff;
}

table.tbl td {
  text-align: center;
  border: 1px solid #efefef;
  margin: 0;
}