CODEWITHSUNDEEP
twitter-bootstrap
JasonGenX
JasonGenX

Reputation: 5444

How to remove the horizontal line above the bootstrap table?

enter image description here

This is the code generating this:

<div class="panel panel-danger">
    <div class="panel-heading">Offenses</div>
    <div class="panel-body">
        <div class="row" syle="padding: 5px;">
           <div class="col-lg-12 padding-left">
              <table class=" table">
                  <tr>
                      <td>None</td>
                      <td ><button type="button" class="btn btn-danger btn-xs">Add...</button> </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

My questios are:

  1. how do I get rid of the horizontal line above the table? It's part of the table, but no combination of border: 0px or shadow box nulling is helping. It's very persistent.
  2. How can I make sure the second column is aligned to the right? based on the boosstrap 12 grid system -- how do I make the left column "11" and the right "1"?

Upvotes: 2

Views: 1944

Answers (1)

Mooseman
Mooseman

Reputation: 18891

Question 1:

Use the following:

table tr:first-child td{
    border-top: none;
}

Demo: http://www.bootply.com/XIZnEqBuMC

Question 2:

There's no good way to do that with a <table>. If you will not be using more than two columns, floating divs with rows of static height may be a better approach.

Upvotes: 1

Related Questions