时间戳

首页 > 解决方案 > 如何删除表格中的侧边和底边

javascript - 如何删除表格中的侧边和底边

问题描述

我设计了可折叠的手风琴，并在其中放置了一张桌子。我无法删除td表格的边框和侧边框的底部边框。我试着做no-tr.no-bottom-border td {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 ">&nbsp;</span>
										<span class="glyphicon glyphicon-pencil " style="color: red ">&nbsp;</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="# ">&nbsp;View</a>&nbsp;<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="# ">&nbsp;View</a>&nbsp;<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="# ">&nbsp;View</a>&nbsp;<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="# ">&nbsp;View</a>&nbsp;<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="# ">&nbsp;View</a>&nbsp;<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="# ">&nbsp;View</a>&nbsp;<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="# ">&nbsp;View</a>&nbsp;<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="# ">&nbsp;View</a>&nbsp;<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="# ">&nbsp;View</a>&nbsp;<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>

有任何想法吗？

标签： javascripthtmlcss

解决方案

这是更新的代码：

https://codepen.io/creativedev/pen/gKPXJR

我已经添加了

.table-bordered{   
  border: none;
}

并删除

tr.no-bottom-border td {
 border-bottom: none;
 }

推荐阅读