CODEWITHSUNDEEP
twitter-bootstrap-3html-tablehorizontal-line
Darryl Mendonez
Darryl Mendonez

Reputation: 1171

Trying to remove a horizontal line in a bootstrap 3 table

I'm making a table in bootstrap and I'm trying to figure out how to remove the border that appears on the top for every row.

I'm recreating the Stack Overflow home page and for practice and I'm making the table of Top Questions. I'm using 2 bootstrap rows for each actual row. Since I'm using 2 rows to appear as 1 I need to hide the top border of the 2nd row.

I've tried 2 different CSS methods to try to get rid of it to no avail. Both are shown below along with the html: 

<style>

.2nd-line {
    border-top: none;
}

.borderless td, .borderless th {
    border: none;
}

</style>


<div class = "row-fluid"> <!-- begin row 1 -->
  <div class = "col-md-9">
    <div class = "panel-body">
      <table class="table borderless">
        <tr class="warning">
          <td>
            <div class = "col-md-1">
              <p class = "top-questions-stats">0</p>
            </div>
            <div class = "col-md-1">
              <p class = "top-questions-stats">1</p>
            </div>
            <div class = "col-md-1">
              <p class = "top-questions-stats">13</p>
            </div>
            <div class = "col-md-6">
              <a href = "http://stackoverflow.com/questions/33545349/clipping-the-required-portion-of-the-image-using-css" target = "blank"><h5>Clipping the required portion of the image using CSS</h5></a>
            </div>
          </td>
        </tr>
        <tr class="warning 2nd-line borderless">
          <td class = "2nd-line borderless">
            <div class = "col-md-1">
              <p class = "top-questions-stats">votes</p>
            </div>
            <div class = "col-md-1">
              <p class = "top-questions-stats">answer</p>
            </div>
            <div class = "col-md-1">
              <p class = "top-questions-stats">views</p>
            </div>
            <div class = "col-md-2">
              <p>tags</p>
            </div>
            <div class = "col-md-4">
              <p class = "asked">asked 29 secs ago Darryl Mendonez</p>
            </div>
          </td>
        </tr> <!-- end row 1 -->

Upvotes: 1

Views: 4410

Answers (2)

Ppp
Ppp

Reputation: 1015

.borderless > thead > tr > th,
.borderless > tbody > tr > th,
.borderless > tfoot > tr > th,
.borderless > thead > tr > td,
.borderless > tbody > tr > td,
.borderless > tfoot > tr > td {
  border-top: none;
}

This is how to do it without !important tag.

Upvotes: 2

Seth H
Seth H

Reputation: 11

Add the !important attribute to your second style.

.borderless td, .borderless th {
    border: none !important;
}

Upvotes: 1

Related Questions