Michi: Tabelle mit CSS formatieren, Schachbrettmuster, erste, letzte Zeile unterschieldich

Beitrag lesen

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);
    }