CODEWITHSUNDEEP
htmlcss
Alen
Alen

Reputation: 1291

Adding a border line to separate rows in css

I have a HTML code 

          <table class="table table-condensed order-statistics">
        <tr class="order-statistics-row">
          <div class="row">
            <div class="col-lg-4">
              Order ID:
            </div>
            <div class="col-lg-8">
              <strong>{{ $order->so_id }}</strong>
            </div>
          </div>
        </tr>
        <tr class="order-statistics-row">
          <div class="row">
            <div class="col-lg-4">
              Invoice ID:
            </div>
            <div class="col-lg-8">
              <strong>{{ $order->invoice_id }}</strong>
            </div>
          </div>
        </tr>
...Similarly a bit of other rows.
</table>

I want to add some bottom border to separate each row. I tried this.

.order-statistics-row
{
    border-bottom: 1pt solid black;
}

Now this isn't working means border line isn't getting drawn. Can anyone help me or suggest better idea?

Upvotes: 2

Views: 2303

Answers (5)

AnjuRaj
AnjuRaj

Reputation: 298

Apply the "order-statistics-row" class to the div. Check this out: https://jsfiddle.net/fv5n46Lc/1/

Hope this helps!

      <div class="row order-statistics-row">
        <div class="col-lg-4">
          Order ID:
        </div>
        <div class="col-lg-8">
          <strong>{{ $order->so_id }}</strong>
        </div>
      </div>

      <div class="row order-statistics-row">
        <div class="col-lg-4">
          Invoice ID:
        </div>
        <div class="col-lg-8">
          <strong>{{ $order->invoice_id }}</strong>
        </div>
      </div>

Upvotes: 1

Robert Wade
Robert Wade

Reputation: 5003

You are lacking Table Cells <td></td> in your code. You should have cells in your table rows, and these cells should have the border, not the rows.

You might be able to get by without them, but it's not Valid HTML according to the the HTML specification. There's a good write up by @sideshowbarker on this stackoverflow post.

Further, if this is true tabular data, you can accomplish your layout without putting divs inside tables which is a bad practice itself. Handle the width of the columns with CSS and there's no need for bootstrap grids in your table.

Also you'll notice the border-collapse property on the table itself. This will collapse the default border on the table element's cells so that the row doesn't have a gap in it between the cells.

table {
  border-collapse: collapse;
}
tr.order-statistics-row td {
 border-bottom: 1px solid black;
}
<table class="table table-condensed order-statistics">
    <tr class="order-statistics-row">
      <td>Order ID:</td>
      <td><strong>{{ $order->so_id }}</strong></td>
    </tr>
    <tr class="order-statistics-row">
       <td>Invoice ID:</td>
       <td><strong>{{ $order->invoice_id }}</strong></td>
    </tr>
</table>

Upvotes: 1

Ali Rasheed
Ali Rasheed

Reputation: 2817

You know you can simple add a new div and give it a class or that...

see this....

.order-statistics-row {
  border-bottom: 1pt solid black;
}
<tr>
  <div class="order-statistics-row">
    <div class="row">
      <div class="col-lg-4">
        Invoice ID:
      </div>
      <div class="col-lg-8">
        <strong>{{ $order->invoice_id }}</strong>
      </div>
    </div>
  </div>
</tr>

Upvotes: 1

user7582130
user7582130

Reputation:

If you want a border underneath every row, you need to change your class.

Instead of using class .order-statistics-row, use your .row instead.

.row
{
    border-bottom: 1px solid black;
}

I used px here just for the example you can change this back to pt.

Jsfiddle - https://jsfiddle.net/sj5vjsLq/

Upvotes: 1

Faruk Yazici
Faruk Yazici

Reputation: 2404

You can give your styling through your divs and rows rather than tr element.

For example, move your order-statistics-row class to the row div.

See the jsfiddle:

https://jsfiddle.net/u5w971cr/2/

Upvotes: 1

Related Questions