html - 一些 tr 有边框，一些没有边框 css bootstrap

Question

我正在创建一个网络应用程序，其中我有一个包含多个 <tr> 的表格和 <td>

我参加了这些 Bootstrap 类(class) table table-responsive table-bordered在我的 div 中，这是我的表格的样子:

<div class="table table-responsive table-bordered" style="background-color:white">
                <table id="table" class="table table-bordered font" style="width: 100%; padding-top: 10px;">
                    <tr ng-repeat="name in tnameandadd" style="border:none;">
                        <td style="font-size:32px; font-weight:bolder;" colspan="6"></td>
                        <td style="font-size:32px; font-weight:bolder; text-align:right;" colspan="3">{{name.empname}}</td>
                    </tr>
                    <tr ng-repeat="add in tnameandadd" style="border:none;">
                        <td style="font-size:32px;" colspan="3"></td>
                        <td style="font-size:20px; text-align: right;" colspan="6">{{add.address}}</td>
                    </tr>
                    <tr>
                        <td colspan="9" style="border-bottom:1px solid black; margin-bottom:10px;">

                        </td>
                    </tr>
                    <tr>
                        <td colspan="9" style="margin-bottom:10px;">

                        </td>
                    </tr>
                        <tr class="bg-primary border_bottom" style="padding-bottom: 1em;">
                            <th>SonVin Id</th>
                            <th>Date</th>
                            <th>Brand Name</th>
                            <th>Venue Name</th>
                            <th>City</th>
                            <th>Area</th>
                            <th>Instructore</th>
                            <th>Training no.</th>
                            <th>Amount</th>
                        </tr>
                        <tr ng-repeat="rfdata in tableindiv2">
                            <td>{{rfdata.sonvinid}}</td>
                            <td>{{rfdata.date}}</td>
                            <td>{{rfdata.brandname}}</td>
                            <td>{{rfdata.venuename}}</td>
                            <td>{{rfdata.location}}</td>
                            <td>{{rfdata.area}}</td>
                            <td>{{rfdata.instructore}}</td>
                            <td>{{rfdata.trainingno}}</td>
                            <td>{{rfdata.amount}}</td>
                        </tr>
                    <tr>
                        <td colspan="9"><div style="margin-top:15px;"></div></td>
                    </tr>
                        <tr>
                            <td colspan="7">
                            </td>
                            <td>Total</td>
                            <td>{{totalAmount}}</td>
                        </tr>
                </table>
            </div>

这是我的 table

我有多个 tr -s 在我的表中，但我不想给 tr 中的一些添加边框-s 的表，我也想在这里使用 Bootstrap ，如下所示:

<tr ng-repeat="name in tnameandadd" style="border:none;">
    <td style="font-size:32px; font-weight:bolder;" colspan="6"></td>
    <td style="font-size:32px; font-weight:bolder; text-align:right;" colspan="3">{{name.empname}}</td>
</tr>
<tr ng-repeat="add in tnameandadd" style="border:none;">
   <td style="font-size:32px;" colspan="3"></td>
   <td style="font-size:20px; text-align: right;" colspan="6">{{add.address}}</td>
</tr>

我不想将这两个边界tr -s.

我可以在这里做什么来解决这个问题？

我想删除一些 tr 的边框-s.

Answer 1

您需要为 td 应用 border: none，而不是为 'tr'。所以 tr-s 的解决方案是 CSS 规则(但不要忘记从 tr 中删除 style="border:none;"标记):

tr[ng-repeat*="in tnameandadd"] td{
    border: none !important;
}

或者如果这些 tr-s 总是表中的前两行:

#table tr:first-child td,
#table tr:nth-child(2) td {
    border: none !important;
}