斑马风格的桌子有问题。我只需要我的内容是那种斑马样式(黑白线),而不是上面的东西(斑马纹需要在“目前的dans domaine,第二和第三张桌子”下开始)
www.jsfiddle.net/1k0oet48/
最佳答案
只需将一些类添加到表中,即可正确选择它。
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 {
opacity: 1;
transition: 0.01s;
background-color: #111;
transition: 0.3s;
}
.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 {
position: static;
margin-left: 10px;
margin-right: 10px;
}
.header {
text-align: center;
position: static;
margin-top: 40px;
}
th, td{
border:1px solid black;
}
table{
table-layout: fixed;
min-width: 1300px;
border-collapse: collapse;
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) {
background-color: #e5e5e5;
}
td:nth-child(even):hover {
background-color: #b7b7b7;
}
td:nth-child(odd):hover {
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>
<ul>
<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>
<li><a href="#572016">5/7/2016</a></li>
<li><a href="#672016">6/7/2016</a></li>
<li><a href="#772016">7/7/2016</a></li>
</ul>
</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>
<li><a href="#">12/7/2016</a></li>
<li><a href="#">13/7/2016</a></li>
<li><a href="#">14/7/2016</a></li>
</ul>
</li>
<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>
<li><a href="#">12/7/2016</a></li>
<li><a href="#">13/7/2016</a></li>
<li><a href="#">14/7/2016</a></li>
</ul>
</li>
</ul>
</li>
<li class="druhe"><a href="#">☰</a>
<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>
</ul>
</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>
<th colspan="2" style="text-align:left">DATE</th>
<th colspan="2">20/7/2016</th>
<th>streda</th>
<th colspan="8">e-version: http://docinfogroupe.inetpsa.com/ead/dom/401334893.fd </th>
<th colspan="2"> SEMAINE </th>
</tr>
<tr>
<th colspan="4" style="background-color: #d0e6ff" height="25px"> Leader T. Simoncik </th>
<th colspan="9" style="background-color: #d0bad8"> SI Flux - FLX </th>
<th colspan="2" style="background-color: #d0e6ff"> FLV </th>
</tr>
<tr>
<td colspan="4" style="border-bottom: 2px solid black">Presents dans domaine</td>
<td style="text-align:center; border-bottom: 2px solid black" >3</td>
<td colspan="4" style="border-bottom: 2px solid black">Total PSI dans domaine</td>
<td style="text-align:center;border-bottom: 2px solid black">4</td>
<td colspan="5" style="border-bottom: 2px solid black">Simoncik 482892, Kodrla 482904, Vajs 482915, Hrebicek 482168</td>
</tr>
<div class="zebra">
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">CHGT06128770</td>
<td colspan="10"> 11.07.2016,NEO/FLV,De 16h à 18h : Mise en place du Patch ORACLE (EXADATA) dans EXADATA,</td>
<td style="text-align:center"> C</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">HREBICEK</td>
<td colspan="10" >,,PISSARO,Ziadost o zmenu atributu, B6 taha do boxu na retus, lakovna sa ma vyjadrit</td>
<td style="text-align:center"> T</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">KODRLA</td>
<td colspan="10" >,,NOREV,Upratovanie tried (obligatoire, preparation,...),</td>
<td style="text-align:center"> T</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">SIMONCIK</td>
<td colspan="10" >,,ARCHIMEDE,Analyza + riesenie zona automatizacie - zobrazovanie na panely podla ref,</td>
<td style="text-align:center"> T</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2"></td>
<td colspan="10" ></td>
<td style="text-align:center"></td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2"></td>
<td colspan="10" ></td>
<td style="text-align:center"></td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2"></td>
<td colspan="10" ></td>
<td style="text-align:center"></td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
</table>
</div>
</a>
<div style="overflow-x:auto;">
<a name="1072016">
<!--tabulka 2-->
<table cellspacing="0" cellpadding="0" border="0" class="two-th-table">
<tr>
<th colspan="4" style="background-color: #d0e6ff" height="25px"> Leader T. Simoncik </th>
<th colspan="9" style="background-color: #d0bad8"> SI Flux - FLX </th>
<th colspan="2" style="background-color: #d0e6ff"> FLC </th>
</tr>
<tr>
<td colspan="4" style="border-bottom: 2px solid black">Presents dans domaine</td>
<td style="text-align:center; border-bottom: 2px solid black" >3</td>
<td colspan="4" style="border-bottom: 2px solid black">Total PSI dans domaine</td>
<td style="text-align:center;border-bottom: 2px solid black">3</td>
<td colspan="5" style="border-bottom: 2px solid black">Bednarikova 483017, Dobrikova 482545, Duracka 482158</td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">CHGT06107245</td>
<td colspan="10">11.07.2016,FAKIR/PO,FAKIR-PO : INSTALLATION V4.0 2016-07-11 08:30:00 INDISPO 2 h,</td>
<td style="text-align:center"> C</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">CHGT06121081</td>
<td colspan="10" >11.07.2016,CLOE,CLOE - MISE EN PLACE BATCH CORAIL-ERP MG 2016-07-11 15:00:00,</td>
<td style="text-align:center">C</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">CHGT06121354</td>
<td colspan="10" >12.07.2016,CORAIL/ERP,instalacia verzie CORAIL/ERP v1.7.0.15.4 ,</td>
<td style="text-align:center">C</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">DOBRIKOVA</td>
<td colspan="10" >,,CORAIL/ERP,Rituel CORAIL VCO PFA / PSI,</td>
<td style="text-align:center"> T</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">DURACKA</td>
<td colspan="10" >,,,PB s EDI pre B6 - riesi Roman,</td>
<td style="text-align:center">T</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2"></td>
<td colspan="10" ></td>
<td style="text-align:center"></td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2"></td>
<td colspan="10" ></td>
<td style="text-align:center"></td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
</table>
</div>
</a>
<div style="overflow-x:auto;">
<a name="1072016">
<!--tabulka 3-->
<table cellspacing="0" cellpadding="0" border="0" class="two-th-table">
<tr>
<th colspan="4" style="background-color: #d0e6ff" height="25px"> Leader T. Simoncik </th>
<th colspan="9" style="background-color: #d0bad8"> SI Flux - FLX </th>
<th colspan="2" style="background-color: #d0e6ff"> FLC </th>
</tr>
<tr>
<td colspan="4" style="border-bottom: 2px solid black">Presents dans domaine</td>
<td style="text-align:center; border-bottom: 2px solid black" >3</td>
<td colspan="4" style="border-bottom: 2px solid black">Total PSI dans domaine</td>
<td style="text-align:center;border-bottom: 2px solid black">3</td>
<td colspan="5" style="border-bottom: 2px solid black">Bednarikova 483017, Dobrikova 482545, Duracka 482158</td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">CHGT06107245</td>
<td colspan="10">11.07.2016,FAKIR/PO,FAKIR-PO : INSTALLATION V4.0 2016-07-11 08:30:00 INDISPO 2 h,</td>
<td style="text-align:center"> C</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">CHGT06121081</td>
<td colspan="10" >11.07.2016,CLOE,CLOE - MISE EN PLACE BATCH CORAIL-ERP MG 2016-07-11 15:00:00,</td>
<td style="text-align:center">C</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">CHGT06121354</td>
<td colspan="10" >12.07.2016,CORAIL/ERP,instalacia verzie CORAIL/ERP v1.7.0.15.4 ,</td>
<td style="text-align:center">C</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">DOBRIKOVA</td>
<td colspan="10" >,,CORAIL/ERP,Rituel CORAIL VCO PFA / PSI,</td>
<td style="text-align:center"> T</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2">DURACKA</td>
<td colspan="10" >,,,PB s EDI pre B6 - riesi Roman,</td>
<td style="text-align:center">T</td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2"></td>
<td colspan="10" ></td>
<td style="text-align:center"></td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
<tr>
<td style="background-color: #f7dbe5"></td>
<td colspan="2"></td>
<td colspan="10" ></td>
<td style="text-align:center"></td>
<td> <form action="" style="text-align:center"> <input type="checkbox" name="checkbox" value="box"></form></td>
</tr>
</table>
</div>
</a>
</div>
</div>
</body>