有些 tr 有边框，有些没有边框 css bootstrap

Question

我正在创建一个网络应用程序，其中我有一个 table 多个 <tr> 和 <td>

我在我的 div 中使用了这些 bootstrap class table table-responsive table-bordered，这是我的 table 的样子：

<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

我的 table 中有多个 tr-s，但我不想与 table 的某些 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-rule（但不要忘记从 tr 标记中删除 style="border:none;"）：

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

或者如果这些 tr-s 总是在 table 中的前两行：

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

有些 tr 有边框，有些没有边框 css bootstrap

some tr with border and some without border css bootstrap

html

css

border

twitter-bootstrap