我无法让我的table-stripe类与我的Bootstrap框架一起工作。这是我的table的现场预览。我在HTML中设置了.table-striped类,但它没有显示在输出中。我做错了什么?
dba5bblo1#
你的html错了。每行都有一个tbody标签,但是.table-striped的css依赖于tr:nth-child()来对行进行不同的样式设置:
tbody
.table-striped
tr:nth-child()
.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th
修复你的html,让你有一个单一的tbody来迭代。另外,我在您的参考资料中看到了bootstrap.css和bootstrap.min.css。一个就够了
pjngdqdw2#
问题出在您的表标记上。根据bootstrap文档,将每一行 Package 在tbody标记中:通过:nth-child CSS选择器(IE7 - 8中不可用)将斑马条纹添加到中的任何表行。因此,如果您遍历并删除所有tbody标记,以便在表体的开头和结尾分别只有一个tbody标记,那么它应该可以按预期工作。
bhmjp9jg3#
只是一个额外的信息,ng-repeat应该是:
<tr> inside <tbody>:
<table class="table table-striped"> <thead> <tr> <th class="col-md-1"></th> <th class="col-md-5"></th> </tr> </thead> <tbody> <tr ng-repeat="v1 in v"> <td><span class="glyphicon glyphicon-trash"/></td> <td>{{v1.name}}</td> </tr> </tbody> </table>
mctunoxg4#
必须有head标签和tbody标签应该有工作“表条纹”,没有这些标签条纹风格不会得到应用到表。下面是一个例子:
<table class="table table-bordered table-striped"> <thead> <tr> <th><mark>#Periods</mark></th> <th><mark>Monday</mark></th> <th><mark>Tuesday</mark></th> <th><mark>Wednesday</mark></th> <th><mark>Thursday</mark></th> <th><mark>Friday</mark></th> <th><mark>Saturday</mark></th> <th><mark>Sunday</mark></th> </tr> </thead> <tbody > <tr> <th>1</th> <td>MATHS</td> <td>ENGLISH</td> <td>PHYSICS</td> <td>SOCIAL</td> <td>SCIENCE</td> <td>TELUGU</td> <td>HOLIDAY</td> </tr> <tr> <th>2</th> <td>MATHS</td> <td>SCIENCE</td> <td>PHYSICS</td> <td>SOCIAL</td> <td>TELUGU</td> <td>ENGLISH</td> <td>HOLIDAY</td> </tr> </tbody>
4条答案
按热度按时间dba5bblo1#
你的html错了。每行都有一个
tbody
标签,但是.table-striped
的css依赖于tr:nth-child()
来对行进行不同的样式设置:修复你的html,让你有一个单一的tbody来迭代。
另外,我在您的参考资料中看到了bootstrap.css和bootstrap.min.css。一个就够了
pjngdqdw2#
问题出在您的表标记上。根据bootstrap文档,将每一行 Package 在tbody标记中:
通过:nth-child CSS选择器(IE7 - 8中不可用)将斑马条纹添加到中的任何表行。
因此,如果您遍历并删除所有tbody标记,以便在表体的开头和结尾分别只有一个tbody标记,那么它应该可以按预期工作。
bhmjp9jg3#
只是一个额外的信息,ng-repeat应该是:
mctunoxg4#
必须有head标签和tbody标签应该有工作“表条纹”,没有这些标签条纹风格不会得到应用到表。下面是一个例子: