Bootstrap表 - 删除第一个TD顶部边框的问题
您好我使用bootstrap表来设计我的页面。我已经编写了删除偶数行的第一个td顶部边框的代码。但它没有在bootstrap table＆amp;我无法删除这行甚至是第一个td的顶部边界。请帮我。先感谢您。有关详细信息，请参阅附件。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.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>
2 个答案:
答案 0 :(得分：4)
你必须删除奇数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>
答案 1 :(得分：1)
使用rowspan="2"
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.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 rowspan="2">
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>
<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 rowspan="2">
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>
<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 rowspan="2">
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>
<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 rowspan="2">
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>
<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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？