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

[Michi]

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

[Tabellenkalk]

Hallo,

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

Hab ich grad ein dejavú?

Folgende Probleme habe ich nun.

• Ich würde gerne die erste und die letzte Zeile nur 10 Pixel hoch machen.

Und das scheitert woran?

• Der Schatten um die Rundungen klappt nicht.

Bei Klapp-Handys wäre "klappt nicht" das eine aussagekräftige Problembeschreibung.

• und ich bekomme die erste spalte nicht angesprochen

Und das obwohl du ansonst sehr souverän die Tabelle gestylt hast? Das bisherige sieht doch schon ziemlich gut aus.

Wir haben ein Wiki, in dem die zu verwendenden Selektoren eigentlich alle aufgeführt sind.

Gruß
Kalk

[Michi]

Hab ich grad ein dejavú?

dejavú -> kenne ich seit gestern als Modemarke (habe ich in der Stadt gesehen).

• Ich würde gerne die erste und die letzte Zeile nur 10 Pixel hoch machen.

Und das scheitert woran?

habe ich gelöst. Da ein   als font verarbeitet wird, habe ich dieses nun einfach mittels font-size: 5px; auf die gewünschte Grösse gebracht.

Bei der ersten Spalte habe ich nun das

tr td:first-child { 

	background-color: #fff ;

	padding:10px 0 10px 10px;

	border-bottom: 1px solid #C0C0C0

    }

eingefügt, doch auch hier würde ich gerne gerade und ungerade unterschiedlich haben. Weiter versuche ich noch die zweite Zeile anders zu formatieren,

.preise tr:nth-child(2n) td { 

	background-color: #ff0000;

    }  	

Was aber bei mir irgendwie keine Auswirkung hat.

.preise tr:nth-child(2n) <- 2 Zeile

 td <- alle spalten

Michi

[Tabellenkalk]

Hallo,

Was denn nun?

Weiter versuche ich noch die zweite Zeile anders zu formatieren,

die zweite Zeile, oder

tr:nth-child(2n)

jede zweite Zeile?

Gruß
Kalk

[Michi]

jede zweite Zeile?

Nein nur die Zweite Zeile

und nur

die erste spalte ungerade/gerade

[Tabellenkalk]

Hallo,

jede zweite Zeile?

Nein nur die Zweite Zeile

nth-child

und nur

die erste spalte ungerade/gerade

dejavú

Gruß
Kalk

[Gunnar Bittersmann]

@@Michi

jede zweite Zeile?

Nein nur die Zweite Zeile

Kalk will auf den Unterschied zwischen a und b in :nth-child(an+b) hinaus.

Bei dem einen ist a = 2 und b = 0, bei dem anderen a = 0 und b = 2.

LLAP 🖖

[Tabellenkalk]

Hallo,

Um dich nochmal mit der Nase drauf zu stoßen:

/* 4 Spalte */

tr td:nth-child(4n){

Hier meinst du eigentlich "die vierte Spalte" (zumindest deute ich es so), aber du selektiert jede vierte Spalte.

Gruß
Kalk

[MrMurphy1]

Hallo,

so ganz habe ich noch nicht verstanden, wie sich die Spalten und Zeilen verhalten sollen, speziell an den Kreuzungspunkten.

Ich habe mal das folgende Beispiel erstellt. Die Tabelle enthält zwar caption, thead und tfoot, die ich aber nicht zu der von dir gewünschten Auswahl an Spalten und Zeilen zähle. Für mich gehören die aber zu einer vollständigen Tabelle und ich lasse sie drin, um zu zeigen, wie sie berücksichtigt oder halt auch nicht berücksichtigt werden können.

Ansonsten habe ich folgendes durch Farben ausgewählt:

1. Die erste Spalte, grade und ungrade
2. die vierte Spalte einfarbig
3. der erste Zeile
4. die letzte Zeile wobei ich wie schon geschrieben nicht wußte, wie sich die Kreuzungszellen verhalten sollen. Aktuell haben deshalb in der ersten Spalte die Farben der ersten Spalte Vorrang, in der vierten Spalte jedoch die Farben der ersten und letzten Zeile.

Im colground-Element kannst du ja auch spaßenshalber mal "<col class="col04" />" als Kommentar kennzeichnen und gleichzeitig den Kommentar um "<col class="col04" span="2" />" entfernen.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Tabellenlayout</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      table {
         border-collapse: separate; /*Zellzwischenräume*/
         border-collapse: collapse; /*keine Zell-Zwischenräume*/
      }
      thead {
         background-color: #f3c600;
      }
      tbody {
         /*background-color: #ffeb91;*/
      }
      tfoot {
         background-color: white;
         /*Rand oben und unten (funktioniert nur mit border-collapse: collapse):*/
         border-top: 1px solid #f3c600;
         border-bottom: 1px solid #f3c600;
      }
      th,
      td {
         text-align: left;
         vertical-align: top;
         padding: 0.3rem 0.7rem;
      }
      tbody tr:nth-child(odd) {
         /*background-color: green;*/
      }
      tbody tr:nth-child(2n+1) th:nth-child(1) {
         background-color: red;
      }
      tbody tr:nth-child(2n+2) th:nth-child(1) {
         background-color: gray;
      }
      col:nth-child(4) {
         background-color: skyblue;
      }
      tbody tr:first-child {
         background-color: pink;
      }
      tbody tr:last-child {
         background-color: cyan;
      }
   </style>
</head>
<body>
   <main>
      <table>
         <caption>Caption: Eine Beispieltabelle</caption>
         <colgroup> <!-- CSS-Zugriff auf Spalten -->
            <col class="col01" />
            <col class="col02" />
            <col class="col03" />
            <!-- Von den beiden folgenden Einträgen nur einen auswählen! -->
            <col class="col04" />
            <!-- <col class="col04" span="2" /> -->
            <col class="col05" />
            <col class="col06" />
            <col class="col07" />
         </colgroup>
         <thead>
            <tr>
               <th></th>
               <th>Banane</th>
               <th>Orange</th>
               <th>Kiwi</th>
               <th>Erdbeere</th>
               <th>Mandarine</th>
               <th>Mango</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <th>VW</th>
               <td>0101</td>
               <td>0102</td>
               <td>0103</td>
               <td>0104</td>
               <td>0105</td>
               <td>0106</td>
            </tr>
            <tr>
               <th>Mercedes</th>
               <td>0201</td>
               <td>0202</td>
               <td>0203</td>
               <td>0204</td>
               <td>0205</td>
               <td>0206</td>
            </tr>
            <tr>
               <th>Audi</th>
               <td>0301</td>
               <td>0302</td>
               <td>0303</td>
               <td>0304</td>
               <td>0305</td>
               <td>0306</td>
            </tr>
            <tr>
               <th>BMW</th>
               <td>0401</td>
               <td>0402</td>
               <td>0403</td>
               <td>0404</td>
               <td>0405</td>
               <td>0406</td>
            </tr>
            <tr>
               <th>Jaguar</th>
               <td>0501</td>
               <td>0502</td>
               <td>0503</td>
               <td>0504</td>
               <td>0505</td>
               <td>0506</td>
            </tr>
            <tr>
               <th>Bugatti</th>
               <td>0601</td>
               <td>0602</td>
               <td>0603</td>
               <td>0604</td>
               <td>0605</td>
               <td>0606</td>
            </tr>
            <tr>
               <th>Bentley</th>
               <td>0701</td>
               <td>0702</td>
               <td>0703</td>
               <td>0704</td>
               <td>0705</td>
               <td>0706</td>
            </tr>
         </tbody>
         <tfoot> <!-- tfoot muss nicht mehr direkt hinter thead stehen -->
            <tr>
               <td colspan="7">Der tfoot der Tabelle.</td>
            </tr>
         </tfoot>
      </table>
   </main>
</body>
</html>

Gruss

MrMurphy