表条带引导类不工作，但其他类正在工作答案

【问题标题】：table-striped bootstrap class not working but other classes are working表条带引导类不工作，但其他类正在工作
【发布时间】：2021-08-27 15:08:45
【问题描述】：

我在 Angular 项目中使用引导类创建了一个表。只有 table-striped 和 table-hover 类不工作，其余类如 table-primary 工作。而且我还没有写过一行 css 代码（没有覆盖问题）。我已经尝试了堆栈中的其他示例，但没有解决问题出在 tbody 上。我试过包含 tbody 标签但没有用。

<div class="container box" style="margin-top: 10px;">
                <table class="table table-striped table-fit table-bordered table-hover">
                    <thead> 
                        <tr> 
                            <th>Item</th> 
                            <th>Amount</th> 
                            <th>Category</th> 
                            <th>Location</th> 
                            <th>Spent On</th> 
                        </tr> 
                        
                            <tr *ngFor="let entry of expenseEntries">
                                <th scope="row">{{ entry.item }}</th>
                                <th>{{ entry.amount }}</th> 
                                <td>{{ entry.category }}</td> 
                                <td>{{ entry.location }}</td>
                                <td>{{ entry.spendOn | date: 'short' }}</td>
                            </tr>
                      
                    </thead>
                </table>
            </div>

【问题讨论】：

标签： html css node.js angular bootstrap-4

【解决方案1】：

您必须在<table> 标签内定义<thead> 和<tbody> 标签。

tbody 内的表格内容只会受到.table-striped 类的影响，正如官方document 中提到的那样

【讨论】：

谢谢我的错误是我最初将标签放在标签内，然后我尝试删除标签。但我现在正确包裹在标签之外

【解决方案2】：

一开始我包装错了。我的错误是我最初将标签放在标签内，然后我尝试删除标签。但我现在正确地包裹在外面像这样

 <div class="container box" style="margin-top: 10px;">
                <table class="table table-striped table-fit table-bordered table-hover">
                    <thead> 
                        <tr> 
                            <th>Item</th> 
                            <th>Amount</th> 
                            <th>Category</th> 
                            <th>Location</th> 
                            <th>Spent On</th> 
                        </tr> 
                    
                    <tbody>
                            <tr *ngFor="let entry of expenseEntries">
                                <th scope="row">{{ entry.item }}</th>
                                <th>{{ entry.amount }}</th> 
                                <td>{{ entry.category }}</td> 
                                <td>{{ entry.location }}</td>
                                <td>{{ entry.spendOn | date:'fullDate' | uppercase }}</td>
                            </tr>
                        </tbody>  
                    </thead>  
                </table>
            </div>

但实际上标签应该像下面的代码一样在结束标签之后

<div class="container box" style="margin-top: 10px;">
                <table class="table table-striped table-fit table-bordered table-hover">
                    <thead> 
                        <tr> 
                            <th>Item</th> 
                            <th>Amount</th> 
                            <th>Category</th> 
                            <th>Location</th> 
                            <th>Spent On</th> 
                        </tr> 
                    </thead>  
                    <tbody>
                            <tr *ngFor="let entry of expenseEntries">
                                <th scope="row">{{ entry.item }}</th>
                                <th>{{ entry.amount }}</th> 
                                <td>{{ entry.category }}</td> 
                                <td>{{ entry.location }}</td>
                                <td>{{ entry.spendOn | date:'fullDate' | uppercase }}</td>
                            </tr>
                        </tbody>  
                    
                </table>
            </div>

【讨论】：