CSS3 Tabellen-Übersicht – CSS3 Adventskalender Tag 15

Heute am Tag 15 des CSS3 Adventskalender von maddesigns und dem Webstandard Blog geht es weniger um ein Tutorial, sondern eher um ein umfangreiches Beispiel der bisher vorgestellten Eigenschaften. Als HTML-Basis erstellen wir eine Tabelle mit einer Übersicht zum „CSS3 Browser Support“.

HTML-Tabelle:

<table>
  <thead>
  <tr>
  	<td>Browser:</td>
  	<td class="chrome">Chrome</td>
  	<td class="firefox">Firefox</td>
  	<td class="opera">Opera</td>
  	<td class="safari">Safari</td>
  	<td class="ie">Internet Explorer</td>
  </tr>
</thead>
<tfoot>
  <tr>
  	<td>Version:</td>
  	<td>8</td>
  	<td>3.6</td>
  	<td>10.63</td>
  	<td>5</td>
  	<td>9beta</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <th><a href="">border-radius (runde Ecken)</a></th>
    <td><span>Ja</span></td>
    <td><span>Ja</span></td>
    <td><span>Ja</span></td>
    <td><span>Ja</span></td>
    <td><span>Ja</span></td>
  </tr>
  ...
  </tbody>
</table>

CSS:

table {
  border-collapse: separate;
  border-spacing: 0;
  font: normal 18px/1 'Yanone Kaffeesatz', sans-serif;
}
th {
  padding: 10px;
  text-align: left;
}
td {
  padding: 10px;
  text-align: center;
}
td span {
  background: transparent url(tick.png) no-repeat center;
  display: block;
  text-indent: -9999px;
}
td.no-support span {
  background: transparent url(cross.png) no-repeat center;
}
.chrome, .firefox, .opera, .safari, .ie {
  background: transparent url(browser.jpg) no-repeat;
  padding: 105px 0 10px;
  vertical-align: top;
  width: 115px;
}
.chrome {background-position: 2px 0}
.firefox {background-position: -103px 0}
.opera {background-position: -205px 0}
.safari {background-position: -307px 0}
.ie {background-position: -410px 0}

thead td, tfoot td {font-weight: bold}
thead td:first-child {
  text-align: right; 
  padding: 105px 10px 10px;
}
tfoot td:first-child {
  text-align: right; 
  padding: 5px 10px;
}


tbody tr:nth-child(odd) td, 
tbody tr:nth-child(odd) th{
  background-color:#555;
  color:#f0f0f0;
  border-bottom:1px solid #666;
  background:-webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.39, rgb(105,105,105)),
      color-stop(0.7, rgb(145,145,145))
      );
  background:-moz-linear-gradient(
      center bottom,
      rgb(105,105,105) 39%,
      rgb(145,145,145) 70%
      );
  text-shadow:1px 1px 1px #000;
}
tbody tr:nth-child(odd):hover td,
tbody tr:nth-child(odd):hover th {
  background-color:#555;
  color:#f0f0f0;
  border-bottom:1px solid #444;
  background:-webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.39, rgb(105,105,105)),
      color-stop(0.7, rgb(155,155,155))
      );
  background:-moz-linear-gradient(
      center bottom,
      rgb(105,105,105) 39%,
      rgb(155,155,155) 70%
      );
  text-shadow:1px 1px 1px #000;
}
tbody tr:nth-child(odd) a,
tbody tr:nth-child(odd) a:hover {
  color:#f0f0f0;
  text-decoration: none;
}
tbody tr:nth-child(even) td,
tbody tr:nth-child(even) th {
  background-color:#444;
  color:#444;
  border-bottom:1px solid #777;
  background:-webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.39, rgb(189,189,189)),
      color-stop(0.7, rgb(224,224,224))
      );
  background:-moz-linear-gradient(
      center bottom,
      rgb(189,189,189) 39%,
      rgb(224,224,224) 70%
      );
  text-shadow:1px 1px 1px #fff;
}
tbody tr:nth-child(even):hover td,
tbody tr:nth-child(even):hover th {
  background-color:#444;
  color:#444;
  border-bottom:1px solid #777;
  background:-webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.39, rgb(199,199,199)),
      color-stop(0.7, rgb(244,244,244))
      );
  background:-moz-linear-gradient(
      center bottom,
      rgb(199,199,199) 39%,
      rgb(244,244,244) 70%
      );
  text-shadow:1px 1px 1px #fff;
}
tbody tr:nth-child(even) a,
tbody tr:nth-child(even) a:hover {
  color:#444;
  text-decoration: none;
}
tbody td {
  border-left: 1px dotted #666;
}

tbody tr:first-child th {
-moz-border-radius: 15px 0 0 0;
border-radius: 15px 0 0 0;
}
tbody tr:first-child td:last-child {
-moz-border-radius: 0 15px 0 0;
border-radius: 0 15px 0 0;
}
tbody tr:last-child th {
-moz-border-radius: 0 0 0 15px;
border-radius: 0 0 0 15px;
}
tbody tr:last-child td:last-child {
-moz-border-radius: 0 0 15px 0;
border-radius: 0 0 15px 0;
}
tbody tr:last-child td, 
tbody tr:last-child th,
tbody tr:last-child:hover td,
tbody tr:last-child:hover th {
  border-bottom: none;
}

Screenshot:

Demo

Demo-Datei zu CSS3 Tabelle aufrufen

Am Tag 16 geht es im Webstandard-Blog mit „CSS3 2D Transforms“ weiter.

Flattr this!

5 Gedanken zu „CSS3 Tabellen-Übersicht – CSS3 Adventskalender Tag 15“

  1. Hallo Andreas,
    hier ist der Teil, der die Hintergrundfarbe der Zeilen macht:


    ...

    tbody tr:nth-child(odd):hover td,
    tbody tr:nth-child(odd):hover th {
    background-color:#555;
    ...
    }

    ...

    tbody tr:nth-child(even) td,
    tbody tr:nth-child(even) th {
    background-color:#444;
    ...
    }
    ...

    Der IE8 versteht aber die CSS3-Selectoren :nth-child(odd) und :nth-child(even) nicht, deshalb habe ich in der Demo noch die selectivizr JS-Bibliothek integriert. Vielleicht liegt es daran? Für IE<9 müsstest du also wie gewohnt CSS-Klassen verwenden (oder ein anderes kleinen JS-Schnipselchen einbauen).

Kommentare sind geschlossen.