bootstrap table-striped
时间: 2023-10-07 16:08:47 浏览: 30
bootstrap table-striped 是 Bootstrap 框架中一个用于表格的 CSS 类。它可以为表格的每一行添加斑马线样式,即相邻的两行表格行颜色不同,以提高表格的可读性。
使用方式如下:
```html
<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>
```
在上述代码中,`table-striped` 类被添加到了 `<table>` 标签上,表示需要为表格的每一行添加斑马线样式。
相关问题
table-striped table-dark
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 设置了高度, bootstrap-table-resizable列表宽度不能拖动了
Bootstrap Table Resizable 插件是用来实现 Bootstrap Table 列表的宽度可拖拽的功能,但是如果你设置了表格的高度,可能会导致该插件无法正常工作。
解决方案是在设置表格高度的同时,同时也需要设置表格容器的高度,并且将表格容器的 `overflow` 属性设置为 `auto`,这样就可以让 Bootstrap Table Resizable 插件正常工作了。
以下是一个示例代码:
```html
<div class="table-responsive" style="height: 200px; overflow: auto;">
<table id="table" class="table table-bordered table-striped"></table>
</div>
<script>
$(function() {
$('#table').bootstrapTable({
// 表格的配置
});
// 初始化表格可拖拽列宽度的插件
$('#table').resizableColumns({
// 插件的配置
});
});
</script>
```
注意,表格容器的高度需要大于等于表格的高度,否则会导致表格溢出容器而无法正常显示。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)