<ul> 和 <li> -表格具有交替的行顏色

Question

我想創建一張與圖片中的桌子一樣的桌子。 我用以下方法制作了這張桌子：

 <script language="Javascript"> $(document).ready(function() { $('#example tr').click(function() { var href = $(this).find("a").attr("href"); if(href) { alert(href); return false; window.location = href; } }); }); 

 table#example { border-collapse: collapse; } tr:nth-child(even) { background-color: #f1f1f1; } tr:nth-child(odd) { background-color: #fff; } li:nth-child(even) { background-color: #f1f1f1; } li:nth-child(odd) { background-color: #fff; } #example tr:hover { background-color: #ccc; } #example th { background-color: #fff; } #example th, #example td { padding: 3px 5px; } #example td:hover { cursor: pointer; } 

 <h2>Table</h2> <div style="overflow:auto;height:150px;border: 2px solid grey;"> <table id="example" style="width:100%"> <tr> <td style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a> </td> <td>BBBBBBBBBBB</td> <td>CCCCCC</td> </tr> <tr> <td style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a> </td> <td>BBBBBBBBBBB</td> <td>CCCCCC</td> </tr> <tr> <td style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a> </td> <td>BBBBBBBBBBB</td> <td>CCCCCC</td> </tr> <tr> <td style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a> </td> <td>BBBBBBBBBBB</td> <td>CCCCCC</td> </tr> <tr> <td style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a> </td> <td>BBBBBBBBBBB</td> <td>CCCCCC</td> </tr> <tr> <td style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a> </td> <td>BBBBBBBBBBB</td> <td>CCCCCC</td> </tr> </table> </div> 

表例

現在的問題是：如何僅使用<ul>和<li>標簽創建這樣的表？

我正在嘗試而沒有成功。 看看我有多遠：

 $(document).ready(function() { $('#example li').click(function() { var href = $(this).find("a").attr("href"); if(href) { alert(href); return false; window.location = href; } }); }); 

 table#example2 { border-collapse: collapse; } li:nth-child(even) { background-color: #f1f1f1; } li:nth-child(odd) { background-color: #fff; } #example2 li:hover { background-color: #ccc; } #example2 li{ padding-top: 3px; padding-right: 5px; padding-left:-30px; list-style-type: none; } #example2 li:hover { cursor: pointer; } #example2 ul { list-style:none; padding-left:0; margin-left: -40px; } 

 <div style="overflow:auto;height:150px;border: 2px solid grey;"> <ul id="example2" style="width:100%"> <li> <ul> <li style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAA</a></li> <li>BBBBBB</li> <li>CCCCCC</li> </ul> </li> </ul> </div> 

我不知道它看起來像帶有表標簽的表。 有人可以通過解釋如何實現這一目標來幫助我嗎？ 非常感謝。

Answer 1

我認為這就是您正在尋找的https://jsfiddle.net/16q2xr8k/6/

在此處添加display: inline ：

#example li {
  display: inline;
  padding-top: 3px;
  padding-right: 5px;
  padding-left: -30px;
  list-style-type: none;
}

在這里用ul切換li ：

ul:nth-child(even) {
  background-color: #f1f1f1;
}

ul:nth-child(odd) {
  background-color: #fff;
}