bootstrap-6

表格：bootstrap为表格提供了1种基础样式和4种附加样式以及一个支持响应式的表格。主要包括：

　　.table:基础表格

　　.table-striped:斑马线表格

　　.table-bordered:带边框的表格

　　.table-hover:鼠标悬停高亮的表格

　　.table-condensed:紧凑型表格

　　.table-responsive:响应式表格

表格行的类：bootstrap还为表格行元素tr提供了五种不同的类名，每种类名控制了行的不同背景颜色：

　　.active:表示当前活动的颜色，#f5f5f5;

　　.success:表示成功或者正确的行为

　　.info:表示中立的信息或者行为

　　.warning:表示警告，需要特别提醒

　　.danger:表示危险或者可能是错误的行为

　　注意：除了.active之外，其他的四种类型和".table-hover"配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要的tr元素添加其他颜色的样式时，在.table-hover表格中也要做相应的调整。

　　要实现悬浮状态，需要在table标签上加上.table-hover类。

表格----基础表格：

　　在bootstrap中，对于基础表格是通过类名.table来控制，.table主要有三个作用：

　　1.给表格设置margin-bottom:20px以及设置单元内距

　　2.在thead底部设置了一个2px的浅灰色实线

　　3.每个单元格顶部设置了一个1px的浅灰色实线　

表格----斑马线表格

　　斑马线表哥就是让表格带有背景条纹效果，在bootstrap中实现这种表格效果并不困难，只需要在<table class="table">的基础上增加类名".table-striped"即可。

　　其效果与基础表格相比，仅仅是在tbody隔行有一个浅灰色的背景色。

表格---带边框的表格：

　　即所有的单元格具有一条1px的边框。只需要在<table class="table">基础上添加一个.table-bordered

表格----鼠标悬浮在高亮的表格

　　当鼠标悬停在表格的行上面有一个高亮的背景色，这样的表格让人看起来就是舒服，只要在<table class="table">添加类名.table-hover即可，

　　其效果就是当你鼠标悬停在某一个单元格上是，单元格所在的行的背景色都虎变成浅灰色。

表格----紧凑型表格：

　　就是单元格内距或者内距较其他表格的内距更小。只需要在<table class="table">中添加了table-condensed

　　注意：大家在使用bootstrap表格时，千万注意，<table>元素中一定不能缺少类名table

表格----响应式表格：

　　只需要在<table class="table">中添加.table-responsive，此容器就是响应式容器，当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条，当你的浏览器可视区域大于768px,表格底部水平滚动条就会消失。