Tabelle - Mein erstes Ergebnis

[IsyChan]

Hallo MrMurphy,

hab mich mal an meinem Screenshot vom ersten Posting versucht. Dabei ist folgendes herausgekommen:

<table width="100%">
   <thead class="thead">
     <tr>
       <th>TLD Domain</th>
       <th>Beschreibung</th>
       <th>Preis / Jahr</th>
       <th>Kündigungsfrist</th>
       <th>Laufzeit / Abrechnung</th>
     </tr>
   </thead>

   <tbody>
      <table width="100%" border="0">           
         <tr>
           <td>.de</td>
           <td>Deutschland</td>
           <td>7,44 €</td>
           <td>6 Wochen</td>
           <td>1 Jahr / jährlich</td>
           </tr>
       </table>
   </tbody>
</table>

Und das dazugehörige CSS (in Anlehnung an eine Online Demo von Peter M. Müller und der Reihe Little Boxes):

table {
    border-collapse:separate;
    border-spacing:1px;
    width:100%;
  }
  
  thead { background-color: #d1e9f2; color:#000;}
  tbody { background-color:#f4f3f3;}
  
  th, td {
    text-align:left;
    vertical-align:top;
    padding:0.5em 1em;
  }
  
  th:nth-child(1){ width:17%; }
  th:nth-child(2){ width:20%; }
  th:nth-child(3){ width:15%; }
  th:nth-child(4){ width:20%; }
  th:nth-child(5){ width:28%; }

  td:nth-child(1){ width:17%; }
  td:nth-child(2){ width:20%; }
  td:nth-child(3){ width:15%; }
  td:nth-child(4){ width:20%; }
  td:nth-child(5){ width:28%; }

  
  tbody tr:nth-child(odd) { background-color:#efefef;}
  tbody tr:hover {background-color:#cecece;}

Kann man daran noch etwas verbessern, vereinfachen oder lässt sich damit weiterarbeiten?

Mein Beispiel ist auch online zu finden: http://codepen.io/anon/pen/qOdbbb