在表格的<table>标签中添加table-striped类名。这个类名会将表格的每一行交替添加背景色。 示例代码: 代码语言:html 复制 <tableclass="table table-striped"><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td><td>数据3</td>...
<tableclass="table">...</table> 2、条纹状表格 通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。 <tableclass="table table-striped">...</table> 3、带边框的表格 添加.table-bordered类为表格和其中的每个单元格增加边框。 <tableclass="table table-bordered">...</table> 4、鼠标悬...
这个表格使用了斑马条纹的 CSS class,这个 class 是在相关的 bootstrap css 文件中定义,class 名称是 .table-striped。实例 <table class="table table-striped"> <thead> <tr> <th>Student-ID</th> <th>First Name</th> <th>Last Name</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <...
联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格: <table class="table table-dark table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr>...
<table class="table"> ... </table> 条纹状表格 通过.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。 跨浏览器兼容性 条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持。 #First NameLast NameUsername 1 Mark Otto @mdo 2 Jacob Thornton @fat...
1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。 **跨浏览器兼容性:条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持。 3,带边框的表格.table-bordered:<table class="table table-bordered"> ... </tab...
有时候为了让表格更具阅读性,需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难,只需要在<table class="table">的基础上增加类名“.table-striped”即可: <table class="table table-striped"> ...
<table class="table table-bordered"> 1. table-striped配合 “:nth-child”选择器使用,来改变默认的颜色效果,也称之为隔行变色或斑马线,起到两种不同颜色变化的效果,条纹状态的表格 <style type="text/css"> table.table-striped tr:nth-child(odd){ ...
1.table-striped 在<tbody> 内添加斑马线形式的条纹 ( IE8 不支持) 命令输入: <tableclass="table table-striped "> 显示: 斑马条的表格 2.table-bordered 为所有表格的单元格添加边框 命令输入: <tableclass="table table-bordered"><tr><td>ID</td><td>NAME</td><td>QQ</td></tr> ...
除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。条纹表格通过添加 .table-striped class,您将在 <tbody> 内的行上看到条纹,如下面的实例所示:实例 <table class="table table-striped"> <caption>条纹表格布局</caption> <thead> <tr> <th>名称</th> <th>...