제브라 스타일의 테이블 행

제브라 스타일 테이블에 문제가 있습니다. 그 내용이 아니라 그 얼룩말 스타일 (흑백 선)에있는 내용 만 필요합니다. (얼룩말 부리는 "현재의 도메인, 두 번째 및 세 번째 테이블"아래에 시작해야합니다.)제브라 스타일의 테이블 행

www.jsfiddle.net/1k0oet48/

출처

2016-07-20 Fred007

귀하의 HTML이 잘못 것 같다. 당신은 을 캡슐화, div가 있습니다. 잘 모르겠어요 그건 경우 허용. 또한 tr : nth .... css가 전체 테이블에 적용됩니다. .zbra 클래스가 tr에 적용될 수 있고 CSS가 이에 맞게 작성 될 수 있습니다. – Giri

예 HTML 레이아웃이 올바르지 않습니다. 적절하게 내용을 래핑 할 필요가 있습니다> thead + tbody + tfoot 및 대상 만 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

제브라 스타일의 테이블 행

답변

관련 문제