一些带边框的tr和一些没有边框css bootstrap的tr

时间:2017-01-20 11:44:51

标签: html css twitter-bootstrap border

我正在创建一个网络应用,其中我有一个包含多个 if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported) { await App.CurrentApp.MainPage.DisplayAlert("No Camera", ":( No camera available.", "OK"); return; } _mediaFile = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions { Directory = "Sample", Name = "test.jpg" }); if (_mediaFile == null) return; //ViewModel.StoreImageUrl(file.Path); await App.CurrentApp.MainPage.DisplayAlert("Snap", "Your photo have been added to your Items collection.", "OK"); ImageSource = ImageSource.FromStream(() => { var stream = _mediaFile.GetStream(); _mediaFile.Dispose(); return stream; }); <tr>

的表格

我已经在我的div中使用了这些引导类<td>,这是我的表格的样子:

table table-responsive table-bordered

这是我的表

我的桌子上有多个<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> - 但是我不想要与桌面的某些tr - s接壤,我也想在这里使用bootstrap,例如关注:

tr

我不想将这两个<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> - s接壤。

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

我想删除某些tr - s。

的边框

1 个答案:

答案 0 :(得分:0)

您需要为border: none申请td,而不是'tr'。因此,tr - s的解决方案是CSS规则(但不要忘记从style="border:none;"标记中删除tr

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;
}