CSS-Tabellenlayout, Beispiel 09a

Arbeitszeitauswertung Woche 02/2005
Tag	Datum	Kommt	Geht	Anwesend	Arbeitszeit	Überstunden	Fehlzeiten	Bemerkungen
Summe:						3:48	3:43
Arbeitszeitauswertung Woche 02/2005
Montag	10. Jan							Krankheit
Dienstag	11. Jan	8:49	15:22	6:33	5:48		1:42
Mittwoch	12. Jan	7:32	18:13	10:41	9:56	2:26
Donnerstag	13. Jan	7:39	17:16	9:37	8:52	1:22
Freitag	14. Jan	7:16	13:30	6:14	5:29		2:01
Samstag	15. Jan
Sonntag	16. Jan

Das Style-Sheet für die Tabelle:

table {
   border-collapse: collapse;
   margin: 1em;
   }
td {
   display: none;
   }
table tr.mo td.datum {
   display: inline;
   }
table tr.mo td.datum:after {
   content: ". ";
   }
table tr.so td.datum {
   display: inline;
   }
table tr.so td.datum:after {
   content: ". ";
   }
th {
   display: none;
   }
table th.tag {
   text-align: left;
   }
table tr.mo th.tag {
   font-weight: normal;
   display: inline;
   }
table tr.mo th.tag:before {
   content: "Von: ";
   font-weight: bold;
   }
table tr.so th.tag {
   font-weight: normal;
   display: inline;
   }
table tr.so th.tag:before {
   content: " bis: ";
   font-weight: bold;
   }
table thead tr.caption th {
   display: block;
   border: 2px solid #778da2;
   border-bottom: 1px solid #afc3d4;
   background-color: #bdf;
   text-align: left;
   padding: 1em;
   }
table tfoot tr.caption {
   display: none;
   }
table tfoot tr.last-child th.ubstd {
   display: block;
   background-color: #def;
   text-align: left;
   border: 2px solid #778da2;
   border-width: 0 2px;
   }
table tfoot tr.last-child th.ubstd:before {
   content: " Ueberstunden: ";
   padding-left: 1.5em;
   }
table tfoot tr.last-child th.ubstd:after {
   content: " h ";
   }
table tfoot tr.last-child th.fehlt {
   display: block;
   background-color: #def;
   text-align: left;
   border: 2px solid #778da2;
   border-width: 0 2px 2px;
   }
table tfoot tr.last-child th.fehlt:before {
   content: " Fehlzeiten: ";
   padding-left: 1.5em;
   }
table tfoot tr.last-child th.fehlt:after {
   content: " h ";
   }
table tr {
   display: inline;
   }
table tbody {
   display: block;
   padding: 0 1em;
   background-color: #def;
   border: 2px solid #778da2;
   border-width: 0 2px;
   }

Das HTML der Tabelle:

<table cellspacing="2">
<colgroup>
<col class="tag" />
</colgroup>
<colgroup class="rohdaten">
<col class="datum" />
<col class="kommt" />
<col class="geht" />
</colgroup>
<colgroup class="auswertung1">
<col class="anwsd" />
<col class="arbzt" />
</colgroup>
<colgroup class="auswertung2">
<col class="ubstd" />
<col class="fehlt" />
</colgroup>
<colgroup>
<col class="bemkg" />
</colgroup>
<thead>
<tr class="caption">
<th colspan="9">Arbeitszeitauswertung Woche 02/2005</th>
</tr>
<tr class="first-child">
<th class="first-child tag">Tag</th>
<th class="datum">Datum</th>
<th class="kommt">Kommt</th>
<th class="geht" >Geht</th>
<th class="anwsd">Anwesend</th>
<th class="arbzt">Arbeitszeit</th>
<th class="ubstd">Überstunden</th>
<th class="fehlt">Fehlzeiten</th>
<th class="last-child bemkg">Bemerkungen</th>
</tr>
</thead>
<tfoot>
<tr class="last-child">
<th class="first-child tag">Summe:</th>
<th class="datum"></th>
<th class="kommt"></th>
<th class="geht" ></th>
<th class="anwsd"></th>
<th class="arbzt"></th>
<th class="ubstd">3:48</th>
<th class="fehlt">3:43</th>
<th class="last-child bemkg"></th>
</tr>
<tr class="caption">
<th colspan="9">Arbeitszeitauswertung Woche 02/2005</th>
</tr>
</tfoot>
<tbody>
<tr class="first-child woche mo">
<th class="first-child tag">Montag</th>
<td class="datum">10. Jan</td>
<td class="kommt"></td>
<td class="geht" ></td>
<td class="anwsd"></td>
<td class="arbzt"></td>
<td class="ubstd"></td>
<td class="fehlt"></td>
<td class="last-child bemkg">Krankheit</td>
</tr>
<tr class="woche di">
<th class="first-child tag">Dienstag</th>
<td class="datum">11. Jan</td>
<td class="kommt">8:49</td>
<td class="geht" >15:22</td>
<td class="anwsd">6:33</td>
<td class="arbzt">5:48</td>
<td class="ubstd"></td>
<td class="fehlt">1:42</td>
<td class="last-child bemkg"></td>
</tr>
<tr class="woche mi">
<th class="first-child tag">Mittwoch</th>
<td class="datum">12. Jan</td>
<td class="kommt">7:32</td>
<td class="geht" >18:13</td>
<td class="anwsd">10:41</td>
<td class="arbzt">9:56</td>
<td class="ubstd">2:26</td>
<td class="fehlt"></td>
<td class="last-child bemkg"></td>
</tr>
<tr class="woche do">
<th class="first-child tag">Donnerstag</th>
<td class="datum">13. Jan</td>
<td class="kommt">7:39</td>
<td class="geht" >17:16</td>
<td class="anwsd">9:37</td>
<td class="arbzt">8:52</td>
<td class="ubstd">1:22</td>
<td class="fehlt"></td>
<td class="last-child bemkg"></td>
</tr>
<tr class="woche fr">
<th class="first-child tag">Freitag</th>
<td class="datum">14. Jan</td>
<td class="kommt">7:16</td>
<td class="geht" >13:30</td>
<td class="anwsd">6:14</td>
<td class="arbzt">5:29</td>
<td class="ubstd"></td>
<td class="fehlt">2:01</td>
<td class="last-child bemkg"></td>
</tr>
<tr class="we sa">
<th class="first-child tag">Samstag</th>
<td class="datum">15. Jan</td>
<td class="kommt"></td>
<td class="geht" ></td>
<td class="anwsd"></td>
<td class="arbzt"></td>
<td class="ubstd"></td>
<td class="fehlt"></td>
<td class="last-child bemkg"></td>
</tr>
<tr class="last-child we so">
<th class="first-child tag">Sonntag</th>
<td class="datum">16. Jan</td>
<td class="kommt"></td>
<td class="geht" ></td>
<td class="anwsd"></td>
<td class="arbzt"></td>
<td class="ubstd"></td>
<td class="fehlt"></td>
<td class="last-child bemkg"></td>
</tr>
</tbody>
</table>