Zebraスタイリングテーブルの行

ゼブラスタイルのテーブルに問題があります。そのゼブラスタイル（黒と白の線）の上にあるものではなく、自分のコンテンツだけを必要とします（シマウマの父は「現在のドメイン、2番目と3番目のテーブル」の下で始める必要があります）Zebraスタイリングテーブルの行

www.jsfiddle.net/1k0oet48/

出典

2016-07-20 Fred007

をするだけのテーブルにいくつかのクラスを追加し、あなたがそれを正しく選択することができますあなたのhtmlが無効なようです。あなたはをカプセル化し、divを持っている。私はそれがだのかはわかりません許可されます。また、あなたのtr：nth .... cssそれは全体のテーブルに適用されます。 .zebraクラスがtrに適用され、CSSがそれに応じて書き込まれる可能性があります – Giri

はいhtmlレイアウトが正しくありません。それに応じてコンテンツをラップする必要があります> thead + tbody + tfootとtargetのみtbody> tr –

。

body, nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
nav {  
 
    display: inline-block; 
 
    position: fixed; 
 
    width: 100%; 
 
    text-align: center; 
 
    background-color: #111; 
 
    vertical-align: top; 
 
    top: -1px; 
 
    opacity: 0.15; 
 
    transition: 0.6s; 
 
} 
 

 
nav:hover { 
 
\t opacity: 1; 
 
\t transition: 0.01s; 
 
\t background-color: #111; 
 
\t transition: 0.3s; 
 
\t 
 
} 
 

 
.nav a { 
 
    display: block; 
 
    background: #111; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 0.7em 1.7em; 
 
    text-transform: uppercase; 
 
    font-size: 85%; 
 
    letter-spacing: 3px; 
 
    position: relative; 
 
} 
 

 
.nav{ 
 
    vertical-align: top; 
 
    display: inline-block; 
 
} 
 

 
.nav li { 
 
    position: relative; 
 
} 
 

 
.nav > li { 
 
    float: left; 
 
    margin-right: 1px; 
 
} 
 

 
.nav li:hover > a { 
 
    transition: 0.3s; 
 
    background-color:#302f2f; 
 
    color: #40d23b; 
 
} 
 

 
.nav ul { 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    z-index: 1; 
 
    left: -99999em; 
 
    background-color: #000; 
 
    border: 1px solid #81D4FA; 
 
    border-top: none; 
 
} 
 
.nav > li:hover > ul { 
 
    left: auto; 
 
    min-width: 100%; 
 
} 
 

 
.nav > li li:hover > ul { 
 
    left: 100%; 
 
    top:-1px; 
 
} 
 

 
.nav > li:hover > a:first-child:nth-last-child(2):before { 
 
    border: 5px solid transparent; 
 
} 
 

 
.nav li li:hover > a:first-child:nth-last-child(2):before { 
 
    border: 5px solid transparent; 
 
    right: 10px; 
 
} 
 

 
.prve{ 
 
    max-width:120px; 
 
    min-width: 90px; 
 
    border: 2px solid #81D4FA; 
 
    border-bottom: none; 
 
    border-top: none; 
 
} 
 

 
.druhe { 
 
    max-width: 140px; 
 
    min-width: 105px; 
 
    border-right: 2px solid #81D4FA; 
 
} 
 

 
.content { 
 
\t position: static; 
 
\t margin-left: 10px; 
 
\t margin-right: 10px; 
 
} 
 

 
.header { 
 
\t text-align: center; 
 
\t position: static; 
 
\t margin-top: 40px; 
 
} 
 
th, td{ 
 
\t border:1px solid black; 
 
} 
 

 
table{ 
 
\t table-layout: fixed; 
 
\t min-width: 1300px; 
 
\t border-collapse: collapse; 
 
\t width: 100%; 
 
} 
 
/*ZISTIT PRECO NEJDE ZEBRA RIADKOVANIE TUTO*/ 
 
.three-th-table tr:nth-child(3) { 
 
    background-color: #FFF; 
 
} 
 
.two-th-table tr:nth-child(2) { 
 
    background-color: #FFF; 
 
} 
 
tr:nth-child(even) { 
 
\t background-color: #e5e5e5; 
 
} 
 

 
td:nth-child(even):hover { 
 
\t background-color: #b7b7b7; 
 
} 
 

 
td:nth-child(odd):hover { 
 
\t background-color: #b2b2b2; 
 
}

<body> 
 
<!--MENU BAR!--> 
 
    <nav> 
 
    <ul class="nav"> 
 
    <li class="prve"><a href="#">Dátumy</a> 
 
    <ul> 
 
     <li><a href="#">1-7/7/2016</a> 
 
\t <ul> 
 
\t  <li><a href="#172016">1/7/2016</a></li> 
 
     <li><a href="#272016">2/7/2016</a></li> 
 
     <li><a href="#372016">3/7/2016</a></li> 
 
     <li><a href="#472016">4/7/2016</a></li> 
 
\t  <li><a href="#572016">5/7/2016</a></li> 
 
\t  <li><a href="#672016">6/7/2016</a></li> 
 
\t  <li><a href="#772016">7/7/2016</a></li> 
 
\t </ul> 
 
\t </li> 
 
     <li><a href="#">8-14/7/2016</a> 
 
     <ul> 
 
     <li><a href="#">8/7/2016</a></li> 
 
     <li><a href="#">9/7/2016</a></li> 
 
     <li><a href="#">10/7/2016</a></li> 
 
     <li><a href="#">11/7/2016</a></li> 
 
\t \t <li><a href="#">12/7/2016</a></li> 
 
\t \t <li><a href="#">13/7/2016</a></li> 
 
\t \t <li><a href="#">14/7/2016</a></li> 
 
     </ul> 
 
\t </li> 
 
\t <li><a href="#">15-21/7/2016</a> 
 
     <ul> 
 
     <li><a href="#">15/7/2016</a></li> 
 
     <li><a href="#">9/7/2016</a></li> 
 
     <li><a href="#">10/7/2016</a></li> 
 
     <li><a href="#">11/7/2016</a></li> 
 
\t  <li><a href="#">12/7/2016</a></li> 
 
\t  <li><a href="#">13/7/2016</a></li> 
 
\t \t <li><a href="#">14/7/2016</a></li> 
 
     </ul> 
 
     </li>  \t \t 
 
\t </ul> 
 
\t </li> 
 
\t <li class="druhe"><a href="#">&#9776</a> 
 
\t <ul> 
 
     <li> <a href="flv.html"> FLV </a> </li> 
 
     <li> <a href="flc.html"> FLC </a> </li> 
 
     <li> <a href="qua.html"> QUA </a> </li> 
 
     <li> <a href="hfx.html"> HFX </a> </li> 
 
     <li> <a href="pdt.html"> PDT </a> </li> 
 
     <li> <a href="rsh.html"> RSH </a> </li> 
 
     <li> <a href="bur.html"> BUR </a> </li> 
 
     <li> <a href="suhrn.html"> SUHRN </a> </li> 
 
     <li> <a href="inci.html"> INCI </a> </li> 
 
     <li> <a href="jira.html"> JIRA </a> </li> 
 
     <li> <a href="chgt.html"> CHGT </a> </li> 
 
     <li> <a href="task.html"> TASK </a> </li> 
 
     <li> <a href="vrs.html"> VRS </a> </li> 
 
\t </ul> 
 
\t </li> 
 
    </ul> 
 
    </nav> 
 
    
 
    <div class="content"> 
 
    
 
    <div class="header"> 
 
    <h1>RPO quotidienne SI </h1> 
 
    </div> 
 
    
 
    <div style="overflow-x:auto;"> 
 
    <a name="172016"> 
 
    <!--tabulka 1--> 
 
    <table cellspacing="0" cellpadding="0" border="0" class="three-th-table"> 
 
    <tr> 
 
\t <th colspan="2" style="text-align:left">DATE</th> 
 
\t <th colspan="2">20/7/2016</th> 
 
\t <th>streda</th> 
 
\t <th colspan="8">e-version: http://docinfogroupe.inetpsa.com/ead/dom/401334893.fd \t \t \t \t \t \t \t \t \t \t \t \t \t \t </th> 
 
\t <th colspan="2"> SEMAINE </th> 
 
\t </tr> 
 
\t <tr> 
 
\t <th colspan="4" style="background-color: #d0e6ff" height="25px"> Leader T. Simoncik </th> 
 
\t <th colspan="9" style="background-color: #d0bad8"> SI Flux - FLX </th> 
 
\t <th colspan="2" style="background-color: #d0e6ff"> FLV </th> 
 
\t </tr> 
 
    <tr> 
 
\t <td colspan="4" style="border-bottom: 2px solid black">Presents dans domaine</td> 
 
\t <td style="text-align:center; border-bottom: 2px solid black" >3</td> 
 
\t <td colspan="4" style="border-bottom: 2px solid black">Total PSI dans domaine</td> 
 
\t <td style="text-align:center;border-bottom: 2px solid black">4</td> 
 
\t <td colspan="5" style="border-bottom: 2px solid black">Simoncik 482892, Kodrla 482904, Vajs 482915, Hrebicek 482168</td> 
 
\t </tr> 
 
\t <div class="zebra"> 
 
\t <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">CHGT06128770</td> 
 
\t <td colspan="10"> 11.07.2016,NEO/FLV,De 16h à 18h : Mise en place du Patch ORACLE (EXADATA) dans EXADATA,</td> 
 
\t <td style="text-align:center"> C</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">HREBICEK</td> 
 
\t <td colspan="10" >,,PISSARO,Ziadost o zmenu atributu, B6 taha do boxu na retus, lakovna sa ma vyjadrit</td> 
 
\t <td style="text-align:center"> T</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">KODRLA</td> 
 
\t <td colspan="10" >,,NOREV,Upratovanie tried (obligatoire, preparation,...),</td> 
 
\t <td style="text-align:center"> T</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">SIMONCIK</td> 
 
\t <td colspan="10" >,,ARCHIMEDE,Analyza + riesenie zona automatizacie - zobrazovanie na panely podla ref,</td> 
 
\t <td style="text-align:center"> T</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2"></td> 
 
\t <td colspan="10" ></td> 
 
\t <td style="text-align:center"></td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2"></td> 
 
\t <td colspan="10" ></td> 
 
\t <td style="text-align:center"></td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2"></td> 
 
\t <td colspan="10" ></td> 
 
\t <td style="text-align:center"></td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> \t 
 
    </table> 
 
    </div> 
 
</a> 
 
    <div style="overflow-x:auto;"> 
 
    <a name="1072016"> 
 
    <!--tabulka 2--> 
 
    <table cellspacing="0" cellpadding="0" border="0" class="two-th-table"> 
 
\t <tr> 
 
\t <th colspan="4" style="background-color: #d0e6ff" height="25px"> Leader T. Simoncik </th> 
 
\t <th colspan="9" style="background-color: #d0bad8"> SI Flux - FLX </th> 
 
\t <th colspan="2" style="background-color: #d0e6ff"> FLC </th> 
 
\t </tr> 
 
    <tr> 
 
\t <td colspan="4" style="border-bottom: 2px solid black">Presents dans domaine</td> 
 
\t <td style="text-align:center; border-bottom: 2px solid black" >3</td> 
 
\t <td colspan="4" style="border-bottom: 2px solid black">Total PSI dans domaine</td> 
 
\t <td style="text-align:center;border-bottom: 2px solid black">3</td> 
 
\t <td colspan="5" style="border-bottom: 2px solid black">Bednarikova 483017, Dobrikova 482545, Duracka 482158</td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">CHGT06107245</td> 
 
\t <td colspan="10">11.07.2016,FAKIR/PO,FAKIR-PO : INSTALLATION V4.0 2016-07-11 08:30:00 INDISPO 2 h,</td> 
 
\t <td style="text-align:center"> C</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">CHGT06121081</td> 
 
\t <td colspan="10" >11.07.2016,CLOE,CLOE - MISE EN PLACE BATCH CORAIL-ERP MG 2016-07-11 15:00:00,</td> 
 
\t <td style="text-align:center">C</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">CHGT06121354</td> 
 
\t <td colspan="10" >12.07.2016,CORAIL/ERP,instalacia verzie CORAIL/ERP v1.7.0.15.4 ,</td> 
 
\t <td style="text-align:center">C</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">DOBRIKOVA</td> 
 
\t <td colspan="10" >,,CORAIL/ERP,Rituel CORAIL VCO PFA/PSI,</td> 
 
\t <td style="text-align:center"> T</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">DURACKA</td> 
 
\t <td colspan="10" >,,,PB s EDI pre B6 - riesi Roman,</td> 
 
\t <td style="text-align:center">T</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2"></td> 
 
\t <td colspan="10" ></td> 
 
\t <td style="text-align:center"></td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2"></td> 
 
\t <td colspan="10" ></td> 
 
\t <td style="text-align:center"></td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> \t 
 
    </table> 
 
    </div> 
 
    </a> 
 
    <div style="overflow-x:auto;"> 
 
    <a name="1072016"> 
 
    <!--tabulka 3--> 
 
    <table cellspacing="0" cellpadding="0" border="0" class="two-th-table"> 
 
\t <tr> 
 
\t <th colspan="4" style="background-color: #d0e6ff" height="25px"> Leader T. Simoncik </th> 
 
\t <th colspan="9" style="background-color: #d0bad8"> SI Flux - FLX </th> 
 
\t <th colspan="2" style="background-color: #d0e6ff"> FLC </th> 
 
\t </tr> 
 
    <tr> 
 
\t <td colspan="4" style="border-bottom: 2px solid black">Presents dans domaine</td> 
 
\t <td style="text-align:center; border-bottom: 2px solid black" >3</td> 
 
\t <td colspan="4" style="border-bottom: 2px solid black">Total PSI dans domaine</td> 
 
\t <td style="text-align:center;border-bottom: 2px solid black">3</td> 
 
\t <td colspan="5" style="border-bottom: 2px solid black">Bednarikova 483017, Dobrikova 482545, Duracka 482158</td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">CHGT06107245</td> 
 
\t <td colspan="10">11.07.2016,FAKIR/PO,FAKIR-PO : INSTALLATION V4.0 2016-07-11 08:30:00 INDISPO 2 h,</td> 
 
\t <td style="text-align:center"> C</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">CHGT06121081</td> 
 
\t <td colspan="10" >11.07.2016,CLOE,CLOE - MISE EN PLACE BATCH CORAIL-ERP MG 2016-07-11 15:00:00,</td> 
 
\t <td style="text-align:center">C</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">CHGT06121354</td> 
 
\t <td colspan="10" >12.07.2016,CORAIL/ERP,instalacia verzie CORAIL/ERP v1.7.0.15.4 ,</td> 
 
\t <td style="text-align:center">C</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">DOBRIKOVA</td> 
 
\t <td colspan="10" >,,CORAIL/ERP,Rituel CORAIL VCO PFA/PSI,</td> 
 
\t <td style="text-align:center"> T</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2">DURACKA</td> 
 
\t <td colspan="10" >,,,PB s EDI pre B6 - riesi Roman,</td> 
 
\t <td style="text-align:center">T</td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2"></td> 
 
\t <td colspan="10" ></td> 
 
\t <td style="text-align:center"></td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> 
 
    <tr> 
 
\t <td style="background-color: #f7dbe5"></td> 
 
\t <td colspan="2"></td> 
 
\t <td colspan="10" ></td> 
 
\t <td style="text-align:center"></td> 
 
\t <td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td> 
 
\t </tr> \t 
 
    </table> 
 
    </div> 
 
    </a> \t \t  
 
    </div> 
 
    </div> 
 
</body>

出典

2016-07-20 05:44:51

Zebraスタイリングテーブルの行

答えて

関連する問題