skip to Main Content

Hi I have used bootstrap table to design my page. I have written code for delete the even row’s first td’s top border. But its not working on bootstrap table & i couldn’t remove this even row’s first td’s top border. Please help me. Thank you in advance. Please see the attachment for further details.
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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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>

2

Answers


  1. you have to remove odd tr’s top and even tr’s bottom border so, Add this 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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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>
    Login or Signup to reply.
  2. it will be helpful to by using rowspan="2"

    .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  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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search