Question

斑马式桌子有问题。我只需要我的内容是斑马风格（黑线和白线）而不是它上面的东西（斑马模式需要开始下面＃34;现在是dans domaine，第二和第三桌＆＃34;

www.jsfiddle.net/1k0oet48 /

Answer 1

只需在表格中添加一些类，就可以正确选择它。

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="#">&#9776</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>

斑马样式我的表格行

1 个答案: