Bootstrap表 - 删除第一个TD顶部边框的问题

时间:2017-12-11 06:59:41

标签: jquery html css twitter-bootstrap

您好我使用bootstrap表来设计我的页面。我已经编写了删除偶数行的第一个td顶部边框的代码。但它没有在bootstrap table&我无法删除这行甚至是第一个td的顶部边界。请帮我。先感谢您。有关详细信息,请参阅附件。 enter image description here



.review-inquiries-tbl>tbody>tr:nth-child(even)>td:first-child,
.table-bordered.submission-tbl>tbody>tr:nth-child(even)>td:first-child {
  border-top: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <div class="header-wrapper"></div>
  <main class="all-content-wrap">
    <div class="admin-console-wrap">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">


            <div class="">
              <table class="table table-bordered submission-tbl review-inquiries-tbl mrgn-btm-4">

                <thead>
                  <tr>
                    <th>S. No.</th>
                    <th>Sender</th>
                    <th>Receiver</th>
                    <th>Date</th>

                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      1.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Flagged Account</p>
                    </td>
                    <td>
                      <p>John Doe</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">joe.d@xyz.com</p>
                      <p class="clr-red">Temp Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                    </td>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      2.
                    </td>
                    <td>
                      <p>CCT Velu</p>
                      <p class="clr-ccc">XYZ USA Inc.</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">joe.d@xyz.com</p>
                      <p class="clr-red">Flagged Account</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                    </td>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                  <tr>
                    <td>
                      3.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">Main Business Email</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                    </td>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                  <tr>
                    <td>
                      4.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">Main Business Email</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                    </td>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!--topbar-header-wrap-->
  </main>

</body>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:4)

你必须删除奇数tr的顶部甚至tr的底部边框,所以,添加这个css

.review-inquiries-tbl>tbody>tr:nth-child(odd)>td:first-child,
.table-bordered.submission-tbl>tbody>tr:nth-child(odd)>td:first-child {
  border-bottom: 0px;
}
.review-inquiries-tbl.table-bordered>tbody>tr:nth-child(even)>td:first-child{
border-top:0px;}

.review-inquiries-tbl>tbody>tr:nth-child(odd)>td:first-child,
.table-bordered.submission-tbl>tbody>tr:nth-child(odd)>td:first-child {
  border-bottom: 0px;
}
.review-inquiries-tbl.table-bordered>tbody>tr:nth-child(even)>td:first-child{
border-top:0px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <div class="header-wrapper"></div>
  <main class="all-content-wrap">
    <div class="admin-console-wrap">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">


            <div class="">
              <table class="table table-bordered submission-tbl review-inquiries-tbl mrgn-btm-4">

                <thead>
                  <tr>
                    <th>S. No.</th>
                    <th>Sender</th>
                    <th>Receiver</th>
                    <th>Date</th>

                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      1.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Flagged Account</p>
                    </td>
                    <td>
                      <p>John Doe</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">joe.d@xyz.com</p>
                      <p class="clr-red">Temp Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                    </td>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      2.
                    </td>
                    <td>
                      <p>CCT Velu</p>
                      <p class="clr-ccc">XYZ USA Inc.</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">joe.d@xyz.com</p>
                      <p class="clr-red">Flagged Account</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                    </td>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                  <tr>
                    <td>
                      3.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">Main Business Email</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                    </td>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                  <tr>
                    <td>
                      4.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">Main Business Email</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                    </td>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!--topbar-header-wrap-->
  </main>

</body>

答案 1 :(得分:1)

使用rowspan="2"

会有所帮助

&#13;
&#13;
.review-inquiries-tbl>tbody>tr:nth-child(even)>td:first-child,
.table-bordered.submission-tbl>tbody>tr:nth-child(even)>td:first-child {
  border-top: none !important;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <div class="header-wrapper"></div>
  <main class="all-content-wrap">
    <div class="admin-console-wrap">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">


            <div class="">
              <table class="table table-bordered submission-tbl review-inquiries-tbl mrgn-btm-4">

                <thead>
                  <tr>
                    <th>S. No.</th>
                    <th>Sender</th>
                    <th>Receiver</th>
                    <th>Date</th>

                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td  rowspan="2">
                      1.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Flagged Account</p>
                    </td>
                    <td>
                      <p>John Doe</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">joe.d@xyz.com</p>
                      <p class="clr-red">Temp Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td rowspan="2">
                      2.
                    </td>
                    <td>
                      <p>CCT Velu</p>
                      <p class="clr-ccc">XYZ USA Inc.</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">joe.d@xyz.com</p>
                      <p class="clr-red">Flagged Account</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                  <tr>
                    <td rowspan="2">
                      3.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">Main Business Email</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>

                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                  <tr>
                    <td rowspan="2">
                      4.
                    </td>
                    <td>
                      <p>VS Koppan</p>
                      <p class="clr-ccc">ABC India Limited</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">vskoppans@gmail.com</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Mosher John</p>
                      <p class="clr-ccc">XYZ Inc</p>
                      <p class="clr-ccc">City, Country</p>
                      <p class="clr-ccc">Main Business Email</p>
                      <p class="clr-red">Permanently Banned</p>
                    </td>
                    <td>
                      <p>Nov 30, 2017</p>
                    </td>

                  </tr>
                  <tr>                        
                    <td>
                      <p>Show subject line here.</p>
                    </td>
                    <td colspan="2">
                      <div class="scroll-bar review-inquiries-content-height">
                        <p>Show content of the message here.</p>

                      </div>
                    </td>

                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!--topbar-header-wrap-->
  </main>

</body>
&#13;
&#13;
&#13;