您好，我使用 Bootstrap 表来设计我的页面。我已经编写了删除偶数行的第一个 td 顶部边框的代码。但它在 Bootstrap 表上不起作用，我无法删除这行的第一个 td 的顶部边框。请帮我。先感谢您。详情请见附件。
.review-inquiries-tbl>tbody>tr:nth-child(even)>td:first-child,
.table-bordered.submission-tbl>tbody>tr:nth-child(even)>td:first-child {
border-top: none !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="header-wrapper"></div>
<main class="all-content-wrap">
<div class="admin-console-wrap">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="">
<table class="table table-bordered submission-tbl review-inquiries-tbl mrgn-btm-4">
<thead>
<tr>
<th>S. No.</th>
<th>Sender</th>
<th>Receiver</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1.
</td>
<td>
<p>VS Koppan</p>
<p class="clr-ccc">ABC India Limited</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">vskoppans@gmail.com</p>
<p class="clr-red">Flagged Account</p>
</td>
<td>
<p>John Doe</p>
<p class="clr-ccc">XYZ Inc</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">joe.d@xyz.com</p>
<p class="clr-red">Temp Banned</p>
</td>
<td>
<p>Nov 30, 2017</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>Show subject line here.</p>
</td>
<td colspan="2">
<div class="scroll-bar review-inquiries-content-height">
<p>Show content of the message here.</p>
</div>
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
<p>CCT Velu</p>
<p class="clr-ccc">XYZ USA Inc.</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">vskoppans@gmail.com</p>
</td>
<td>
<p>Mosher John</p>
<p class="clr-ccc">XYZ Inc</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">joe.d@xyz.com</p>
<p class="clr-red">Flagged Account</p>
</td>
<td>
<p>Nov 30, 2017</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>Show subject line here.</p>
</td>
<td colspan="2">
<div class="scroll-bar review-inquiries-content-height">
<p>Show content of the message here.</p>
</div>
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
<p>VS Koppan</p>
<p class="clr-ccc">ABC India Limited</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">vskoppans@gmail.com</p>
<p class="clr-red">Permanently Banned</p>
</td>
<td>
<p>Mosher John</p>
<p class="clr-ccc">XYZ Inc</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">Main Business Email</p>
<p class="clr-red">Permanently Banned</p>
</td>
<td>
<p>Nov 30, 2017</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>Show subject line here.</p>
</td>
<td colspan="2">
<div class="scroll-bar review-inquiries-content-height">
<p>Show content of the message here.</p>
</div>
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
<p>VS Koppan</p>
<p class="clr-ccc">ABC India Limited</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">vskoppans@gmail.com</p>
<p class="clr-red">Permanently Banned</p>
</td>
<td>
<p>Mosher John</p>
<p class="clr-ccc">XYZ Inc</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">Main Business Email</p>
<p class="clr-red">Permanently Banned</p>
</td>
<td>
<p>Nov 30, 2017</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>Show subject line here.</p>
</td>
<td colspan="2">
<div class="scroll-bar review-inquiries-content-height">
<p>Show content of the message here.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--topbar-header-wrap-->
</main>
</body>最佳答案
你必须删除奇数 tr 的顶部和偶数 tr 的底部边框，所以添加这个 css
.review-inquiries-tbl>tbody>tr:nth-child(odd)>td:first-child,
.table-bordered.submission-tbl>tbody>tr:nth-child(odd)>td:first-child {
border-bottom: 0px;
}
.review-inquiries-tbl.table-bordered>tbody>tr:nth-child(even)>td:first-child{
border-top:0px;}
.review-inquiries-tbl>tbody>tr:nth-child(odd)>td:first-child,
.table-bordered.submission-tbl>tbody>tr:nth-child(odd)>td:first-child {
border-bottom: 0px;
}
.review-inquiries-tbl.table-bordered>tbody>tr:nth-child(even)>td:first-child{
border-top:0px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="header-wrapper"></div>
<main class="all-content-wrap">
<div class="admin-console-wrap">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="">
<table class="table table-bordered submission-tbl review-inquiries-tbl mrgn-btm-4">
<thead>
<tr>
<th>S. No.</th>
<th>Sender</th>
<th>Receiver</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1.
</td>
<td>
<p>VS Koppan</p>
<p class="clr-ccc">ABC India Limited</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">vskoppans@gmail.com</p>
<p class="clr-red">Flagged Account</p>
</td>
<td>
<p>John Doe</p>
<p class="clr-ccc">XYZ Inc</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">joe.d@xyz.com</p>
<p class="clr-red">Temp Banned</p>
</td>
<td>
<p>Nov 30, 2017</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>Show subject line here.</p>
</td>
<td colspan="2">
<div class="scroll-bar review-inquiries-content-height">
<p>Show content of the message here.</p>
</div>
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
<p>CCT Velu</p>
<p class="clr-ccc">XYZ USA Inc.</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">vskoppans@gmail.com</p>
</td>
<td>
<p>Mosher John</p>
<p class="clr-ccc">XYZ Inc</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">joe.d@xyz.com</p>
<p class="clr-red">Flagged Account</p>
</td>
<td>
<p>Nov 30, 2017</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>Show subject line here.</p>
</td>
<td colspan="2">
<div class="scroll-bar review-inquiries-content-height">
<p>Show content of the message here.</p>
</div>
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
<p>VS Koppan</p>
<p class="clr-ccc">ABC India Limited</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">vskoppans@gmail.com</p>
<p class="clr-red">Permanently Banned</p>
</td>
<td>
<p>Mosher John</p>
<p class="clr-ccc">XYZ Inc</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">Main Business Email</p>
<p class="clr-red">Permanently Banned</p>
</td>
<td>
<p>Nov 30, 2017</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>Show subject line here.</p>
</td>
<td colspan="2">
<div class="scroll-bar review-inquiries-content-height">
<p>Show content of the message here.</p>
</div>
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
<p>VS Koppan</p>
<p class="clr-ccc">ABC India Limited</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">vskoppans@gmail.com</p>
<p class="clr-red">Permanently Banned</p>
</td>
<td>
<p>Mosher John</p>
<p class="clr-ccc">XYZ Inc</p>
<p class="clr-ccc">City, Country</p>
<p class="clr-ccc">Main Business Email</p>
<p class="clr-red">Permanently Banned</p>
</td>
<td>
<p>Nov 30, 2017</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>Show subject line here.</p>
</td>
<td colspan="2">
<div class="scroll-bar review-inquiries-content-height">
<p>Show content of the message here.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--topbar-header-wrap-->
</main>
</body>关于jquery - Bootstrap 表 - 删除第一个 TD 顶部边框的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47747841/