众所周知,当您使用Twitter Bootstrap获取表格时,您会得到如下结果:
是否有可能删除表格的第一行,即“Abos Girolamo”上面的那一行?感谢
更新:这是表格的代码:
<table class="table table-no-border">
<tbody>
<tr>
<td>Abos Girolamo</td>
</tr>
<tr>
<td>Aboulker Isabelle</td>
</tr>
<tr>
<td>Adam Adolphe</td>
</tr>
</tbody>
</table>
答案 0 :(得分:28)
.table > tbody > tr:first-child > td {
border: none;
}
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
table {
margin-top: 50px;
}
.table > thead > tr:first-child > td,
.table > tbody > tr:first-child > td {
border: none;
}
<table class="table table-no-border">
<tbody>
<tr>
<td>Abos Girolamo</td>
</tr>
<tr>
<td>Aboulker Isabelle</td>
</tr>
<tr>
<td>Adam Adolphe</td>
</tr>
</tbody>
</table>
答案 1 :(得分:3)
对于那些通过Google发现此问题的人......
Bootstrap表假设您将在标记中使用thead
,这就是为什么该顶行存在的原因。如果您混合使用包含标题的表格并且不包含标题,则可以使用以下CSS对其进行正确设置。
/* Remove the top border when a table is missing the header */
.table > tbody > tr:first-child > td {
border: none;
}
/* Include the border when there's a header */
.table > thead + tbody > tr:first-child > td {
border-top: 1px solid #ddd;
}
答案 2 :(得分:1)
如果你想使用jQuery:
$('#TableID tr:first-child').remove();
<html><body><table id='TableID'>
<tr>Abos Girolamo</tr>
<tr>Aboulker Isabelle</tr>
<tr>Adam Adolphe</tr>
</table></body></html>
答案 3 :(得分:1)
在CSS中,您需要以下内容:
.table > tbody > tr:first-child {
display: none;
}
答案 4 :(得分:1)
我想添加另一种可能性,如果您只想对特定的表执行此操作,并且不希望任何额外的CSS规则可能影响现有表的风险,则可以使用这种可能性:
在表的第一行的每个style="border-top: none"
元素中添加<td>
。
例如
<table class="table">
<tbody>
<tr>
<td style="border-top: none">Abos Girolamo</td>
</tr>
<tr>
<td>Aboulker Isabelle</td>
</tr>
<tr>
<td>Adam Adolphe</td>
</tr>
</tbody>
</table>