Ich habe eine Tabelle in html, leerfelder haben automatisch ein . Diese möchte ich so formatieren, das es grob aussieht wie ein Schachbrett, die erste Spalte und die 4. Spalte sollen eine weitere andere Farbe haben, genausos wie die erste und die letzte Zeile.
Mein Ergebnis ist unter http://cssdeck.com/labs/6cbyfwby abrufbar.
Ich habe eine Tabelle in html, Leerfelder haben automatisch ein . Diese möchte ich so formatieren, das es grob aussieht wie ein Schachbrett, die erste Spalte und die 4. Spalte sollen eine weitere andere Farbe haben, genauso wie die erste und die letzte Zeile.
Mein Ergebnis ist unter http://cssdeck.com/labs/6cbyfwby abrufbar Folgende Probleme habe ich nun.
- Ich würde gerne die erste und die letzte Zeile nur 10 Pixel hoch machen.
- Der Schatten um die Rundungen klappt nicht.
- und ich bekomme die erste spalte nicht angesprochen
table{width:100%;}
td {
padding:10px 0 10px 0;
text-align: center;
width:14%;
}
td:first-child {
text-align: left;
width:30%;
}
td:nth-child(odd){
background-color: #c6c7c1;
}
tr:nth-child(odd) td:nth-child(even){
background-color: #b9bab4;
}
tr:nth-child(even) td:nth-child(odd){
background-color: #d8d9d3;
}
tr:nth-child(even) td:nth-child(even){
background-color: #c8c9c3;
}
/* erste Zeile */
tr:first-child td{
background-color: #ff0000!important;
padding:0 0 0 0;
}
tr:first-child td{
background-color: #fff !important;
padding:0 0 0 0;
}
tr:first-child td:nth-child(4n){
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
/* letzte Zeile */
tr:last-child td{
background-color: #fff !important;
padding:0 0 0 0;
}
tr:last-child td:nth-child(4n){
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* 4 Spalte */
tr td:nth-child(4n){
background-color: #ff8989 !important;
box-shadow:
inset 10px 0px 10px -7px rgba(0,0,0,0.5),
inset -10px 0px 10px -7px rgba(0,0,0,0.5);
}