麦田 发表于 2024-11-21 15:11:54

能用css设置图文列表固定表头吗？






<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图文列表固定表头示例</title>
<style>
/* CSS 样式 */
.table-container {
    width: 100%;
    overflow-x: auto; /* 允许水平滚动 */
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2; /* 表头背景色 */
    position: sticky;
    top: 0; /* 固定表头在顶部 */
    z-index: 10; /* 确保表头在滚动时始终在最上面 */
}
img {
    width: 100px; /* 设置图片宽度 */
    height: auto; /* 图片高度自适应 */
}
</style>
</head>
<body>

<div class="table-container">
<table>
    <thead>
      <tr>
      <th>图片</th>
      <th>标题</th>
      <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td><img src="image1.jpg" alt="Image 1"></td>
      <td>标题1</td>
      <td>这里是描述1。</td>
      </tr>
      <tr>
      <td><img src="image2.jpg" alt="Image 2"></td>
      <td>标题2</td>
      <td>这里是描述2。</td>
      </tr>
      <!-- 更多行 -->
    </tbody>
</table>
</div>

</body>
</html>

孙世才 发表于 2024-11-21 15:53:41

你是想把图文列表以一种表格的形式展现吧 固定标题行？

麦田 发表于 2024-11-21 16:03:23

孙世才 发表于 2024-11-21 15:53
你是想把图文列表以一种表格的形式展现吧 固定标题行？

对，因为表格不支持多图片，只能用图文列表。

Nathan.guo 发表于 2024-11-22 09:59:23

麦田 发表于 2024-11-21 16:03
对，因为表格不支持多图片，只能用图文列表。

那大佬可以直接再图文列表外用普通单元格来模拟表头

麦田 发表于 2024-11-22 10:24:33

Nathan.guo 发表于 2024-11-22 09:59
那大佬可以直接再图文列表外用普通单元格来模拟表头

放外面列宽不好对齐，不同分辨率，流式布局也难搞

Lay.Li 发表于 5 天前

大佬，css我们也不太擅长哈，一般图文列表固定表头都是使用楼上版主的方案实现的。如果要使用流式布局的话，可以试试将固定表头和图文列表放到同一个组件中去展示哈:loveliness:
页: [1]
查看完整版本: 能用css设置图文列表固定表头吗？