如何在表格中删除侧面和底部边框
[英]How to remove side and bottom border in table
问题描述
I have designed collapsible accordion and in that I placed a table. 
我设计了可折叠的手风琴，并在其中放了一张桌子。 I am unable to remove bottom boder of the td and side border of the table. 我无法删除td底部边框和桌子的侧面边框。 I tried to make no-tr.no-bottom-border td {border-bottom: none; 我试图制作no-tr.no-bottom-border td {border-bottom: none; but it not working. 但它不起作用。
I tried to declare the class as outside and made tried border-bottom none but it didn't work. 我试图将类声明为外部类，并尝试将其设置为无底边，但这没有用。
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>
Any Ideas? 有任何想法吗？
2 个解决方案
解决方案1
2 已采纳 2018-06-04 05:59:26
Here is the updated code: 这是更新的代码：
https://codepen.io/creativedev/pen/gKPXJR https://codepen.io/creativedev/pen/gKPXJR
I have added 我已经添加了
.table-bordered{
border: none;
}
and removed 并删除
tr.no-bottom-border td {
border-bottom: none;
}
解决方案2
0 2018-06-04 06:05:11
When I run your code snippet, I don't see any border-bottom in the table or any of the cells. 当我运行您的代码片段时，在表或任何单元格中都看不到任何边框底。
The underline below the links View, Edit is the default text-decoration style for tag. 链接视图，编辑下面的下划线是标记的默认文本修饰样式。 Set it to none like below if you don't want it 如果不希望将其设置为如下所示的无
#outside a {
text-decoration: none;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.