能用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
你是想把图文列表以一种表格的形式展现吧固定标题行？

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

		自动登录	找回密码
密码			立即注册

[未处理] 能用css设置图文列表固定表头吗？

2 个回复