table-striped table-dark
时间: 2024-01-20 07:02:30 浏览: 31
table-striped和table-dark是Bootstrap组件中的两个类名,用于设置表格的样式。
table-striped类用于给表格的每一行添加斑马纹效果,即相邻行的背景颜色不同,以增加表格的可读性。
table-dark类用于设置表格的背景颜色为深灰色,可以用于突出显示表格内容或与其他元素进行对比。
以下是一个演示例子:
```html
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
</tbody>
</table>
```
这个例子展示了一个带有斑马纹效果和深灰色背景的表格。
相关问题
bootstrap table-striped
Bootstrap table-striped 是一个 Bootstrap 框架提供的表格样式类,用于为表格的每一行设置交替的背景颜色。它可以使表格更加美观和易于阅读。在使用时,只需要在表格的 class 属性中添加 table-striped 即可。例如:
```
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
```
这样就可以为表格的每一行设置交替的背景颜色了。
class="table table-striped"
这是一个HTML代码中的class属性,它定义了一个表格的样式,包括交替的背景颜色和边框线条等。在CSS中,可以通过选择器来对该类进行样式设置,例如:
.table {
border-collapse: collapse;
width: 100%;
}
.table th, .table td {
padding: 8px;
text-align: left;
}
.table th {
background-color: #f2f2f2;
color: #333;
}
.table tr:nth-child(even) {
background-color: #f2f2f2;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #f9f9f9;
}