我设计了可折叠的手风琴，我放了一张桌子。
我无法删除表格td和边框的底部边框。我试图制作no-tr.no-bottom-border td {border-bottom: none;但它不起作用。
我试图将该类声明为外部并尝试使用border-bottom none但它不起作用。
Imported bootstrap js and css
<style>
table {
margin-left: 40px;
margin-right:auto;
margin-top: 10px;
}
tr.no-bottom-border td {
border-bottom: none;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
padding: 2px;
font-weight: lighter;
font-size: 11px;
line-height: 1.428571429;
vertical-align: top;
}
#outside{
border-style: none;
}
</style>
</head>
<body>
<div class="container ">
<div class="col-md-6 ">
<div class="panel panel-default ">
<div class="panel-heading " style="background-color: #b3daff; ">
<h4 class="panel-title ">
<a href="# "><span class="glyphicon glyphicon-remove "
style="color: red "></span></a> <a data-toggle="collapse "
data-parent="#accordion " href="#collapseTwo "> <span
style="font-weight: 700; ">Educational Details</span> <span
class="glyphicon glyphicon-plus " style="color: red "> </span>
<span class="glyphicon glyphicon-pencil " style="color: red "> </span>
</a>
</h4>
</div>
<div id="collapseTwo " class="panel-collapse collapse ">
<table class="table table-bordered responsive ">
<thead>
<tr>
<th bgcolor=" #b3daff ">Degree</th>
<th bgcolor=" #b3daff ">Stream</th>
<th bgcolor=" #b3daff ">Yr of Passing</th>
</tr>
</thead>
<tbody>
<tr>
<th>10th</th>
<td></td>
<td></td>
<td class="outside " style="border-style: none; border-bottom-style: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
<tr>
<th style="font-weight: 400px; ">12th*</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
<tr>
<th scope="row " >Bachelors*</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
<tr>
<th scope="row ">Masters</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
<tr>
<th scope="row ">C1</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
<tr>
<th scope="row ">C2</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
<tr>
<th scope="row ">C3</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
<tr>
<th scope="row ">C4</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
<tr class="no-bottom-border ">
<th >C5</th>
<td></td>
<td></td>
<td class="outside " style="border-style: none; border-bottom-style: none; "><a href="# "> View</a> <a href="# ">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!----Ends second column-------->
</div>
<!----Ends accordion column-------->
</div>
<!-- BS example ends here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
任何想法？
答案 0 :(得分：2)
以下是更新后的代码：
https://codepen.io/creativedev/pen/gKPXJR
我添加了
.table-bordered{
border: none;
}
并删除
tr.no-bottom-border td {
border-bottom: none;
}
答案 1 :(得分：0)
当我运行您的代码段时，我看不到表格中的任何边框底部或任何单元格。
链接下方的下划线视图，编辑是标记的默认文本修饰样式。如果您不想要它，请将其设置为无，如下所示
#outside a {
text-decoration: none;
}