个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我设计了可折叠的 Accordion ，并在里面放了一张 table 。我无法删除 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>有什么想法吗？
最佳答案
这是更新后的代码:
https://codepen.io/creativedev/pen/gKPXJR
我已经添加了
.table-bordered{
border: none;
}
并删除
tr.no-bottom-border td {
border-bottom: none;
}
关于javascript - 如何去除表格的边线和底线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50674061/
25
4
0
我是一名优秀的程序员,十分优秀！