删除twitter bootstrap表的第一行

时间:2014-01-28 14:16:29

标签: html twitter-bootstrap html-table

众所周知,当您使用Twitter Bootstrap获取表格时,您会得到如下结果: enter image description here

是否有可能删除表格的第一行,即“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>

5 个答案:

答案 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;
}

http://jsfiddle.net/colinjmiller93/fwsmpu5u/1/

答案 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;
}

http://jsfiddle.net/ahallicks/bwbXA/

答案 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>