Table Styling

For BOSS Core MVC

by mlhDevelopment

HTML

<table>
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Sponsor</th>
      <th>Start Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href='#'>View</a></td>
      <td>Ball Corp. 401k Plan</td>
      <td>Ball Corporation</td>
      <td>1/1/2013</td>
    </tr>
    <tr>
      <td><a href='#'>View</a></td>
      <td>Ball Corp. 401k Plan</td>
      <td>Ball Corporation</td>
      <td>1/1/2013</td>
    </tr>
    <tr>
      <td><a href='#'>View</a></td>
      <td>Ball Corp. 401k Plan</td>
      <td>Ball Corporation</td>
      <td>1/1/2013</td>
    </tr>
    <tr>
      <td><a href='#'>View</a></td>
      <td>Ball Corp. 401k Plan</td>
      <td>Ball Corporation</td>
      <td>1/1/2013</td>
    </tr>
    <tr>
      <td><a href='#'>View</a></td>
      <td>Ball Corp. 401k Plan</td>
      <td>Ball Corporation</td>
      <td>1/1/2013</td>
    </tr>
  </tbody>
</table>

CSS

* { margin: 0; padding: 0; }
html { background-color: #F3F8FE; padding: 10px; }
table {
  border-spacing: 0;
}
th, td { padding: .5em; }
td { background-color: #F3F8FE; }
tr:nth-child(even) td { background-color: #8cf; }
tr:hover td { background-color: #aef; }
th { background-color: blue; }
th:first-child { border-radius: 10px 0 0 0; }
th:last-child { border-radius: 0 10px 0 0; }
tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; }
tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; }