模拟表格div

最新推荐文章于 2025-05-06 14:21:15 发布

在路上等

最新推荐文章于 2025-05-06 14:21:15 发布

阅读量466

点赞数 8

分类专栏： js表格文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_42327537/article/details/136716623

版权

js表格专栏收录该内容

2 篇文章

订阅专栏

因缺少博客内容，无法提炼关键信息形成摘要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.table-container {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  border: 1px solid #ccc; /* 表格线条 */
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}

/* 可选添加奇偶行样式 */
.table-row:nth-child(even) .table-cell {
  background-color: #f2f2f2;
}

/* 若要实现更复杂的单元格合并等功能，可以继续编写相应的CSS */
</style>
</head>
<body>

<div class="table-container">
  <div class="table-row">
    <div class="table-cell">标题1</div>
    <div class="table-cell">数据1</div>
    <div class="table-cell">数据1</div>
  </div>
  <div class="table-row">
    <div class="table-cell">数据1</div>
    <div class="table-cell">数据2</div>
    <div class="table-cell">数据3</div>
  </div>
  <!-- 添加更多行 -->
</div>

</body>
</html>