css显示多行数据样式 |css隐藏div hidden

CSS提供了多种方法来显示多行数据，下面大家来看一些常见的样式实现。

/* 1. 使用表格展示数据 */
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
padding: 8px;
text-align: left;
}
/* 2. 使用列表展示数据 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 8px;
border-bottom: 1px solid black;
}
/* 3. 使用卡片展示数据 */
.card {
display: flex;
flex-wrap: wrap;
}
.item {
width: 200px;
margin-right: 20px;
margin-bottom: 20px;
border: 1px solid black;
padding: 8px;
}
.item img {
width: 100%;
height: auto;
}
/* 4. 使用表格和CSS Grid结合展示数据 */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
border: 1px solid black;
padding: 8px;
}

以上是常见的几种展示多行数据的样式方法，每种方法都有自己的特点和适用场景，在实际项目中需要根据需求选择合适的样式。