<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>

Table Example

现在的问题是：如何仅使用<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>

我不认为它看起来像带有table-tags的表。 有人可以通过解释如何实现这一点来帮助我吗？非常感谢你。

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;
}

在li处切换ul：

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

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