Hi I have used bootstrap table to design my page. I have written code for delete the even row’s first td’s top border. But its not working on bootstrap table & i couldn’t remove this even row’s first td’s top border. Please help me. Thank you in advance. Please see the attachment for further details.
.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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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>
2
Answers
you have to remove odd tr’s top and even tr’s bottom border so, Add this css
it will be helpful to by using
rowspan="2"