类似ul的 html,用 UL 实现类似 Table 的数据列表样式

可以使用 `UL` 标签和CSS样式来实现类似表格的数据列表样式。以下是一个示例：

<ul class="table">
  <li>
    <div>标题1</div>
    <div>标题2</div>
    <div>标题3</div>
  </li>
  <li>
    <div>数据1</div>
    <div>数据2</div>
    <div>数据3</div>
  </li>
  <li>
    <div>数据1</div>
    <div>数据2</div>
    <div>数据3</div>
  </li>
</ul>

使用CSS样式：

.table {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.table li {
  display: table-row;
}
.table div {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 5px;
}
.table li:first-child div {
  font-weight: bold;
}

解释一下以上的代码：

1. 将 `UL` 标签的 `display` 属性设置为 `table`，使其表现为表格。
2. 设置 `border-collapse: collapse;` 让边框重叠在一起。
3. `width: 100%;` 让表格占据整个父级容器的宽度。
4. 将 `LI` 标签的 `display` 属性设置为 `table-row`，使其表现为表格行。
5. 将 `div` 标签的 `display` 属性设置为 `table-cell`，使其表现为表格单元格。
6. 设置单元格的边框和内边距。
7. 设置第一行单元格的字体加粗。