Bootstrap 无法使. table-striped类工作

pn9klfpd  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(4)|浏览(176)

我无法让我的table-stripe类与我的Bootstrap框架一起工作。
这是我的table的现场预览。我在HTML中设置了.table-striped类,但它没有显示在输出中。
我做错了什么?

dba5bblo

dba5bblo1#

你的html错了。每行都有一个tbody标签,但是.table-striped的css依赖于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。一个就够了

pjngdqdw

pjngdqdw2#

问题出在您的表标记上。根据bootstrap文档,将每一行 Package 在tbody标记中:
通过:nth-child CSS选择器(IE7 - 8中不可用)将斑马条纹添加到中的任何表行。
因此,如果您遍历并删除所有tbody标记,以便在表体的开头和结尾分别只有一个tbody标记,那么它应该可以按预期工作。

bhmjp9jg

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>
mctunoxg

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>

相关问题