How to create a stylish border line to separate rows using CSS

Question

How to create a stylish border line to separate rows using CSS

Having some trouble with 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>
...Additional rows here.
</table>

Interested in adding a bottom border to separate each row. Attempted CSS:

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

However, the border line isn't showing up. Any suggestions on how to fix this issue?

html css

Answer 1

Answer №1

Adding a new div with a specific class is a simple way to enhance your code.

Take a look at this example....

.highlighted-section {
  background-color: #f1f1f1;
}

<div class="highlighted-section">
  <p>This is a highlighted section</p>
</div>

Answer 2

Adding a new div with a specific class is a simple way to enhance your code.

Take a look at this example....

.highlighted-section {
  background-color: #f1f1f1;
}

<div class="highlighted-section">
  <p>This is a highlighted section</p>
</div>

Answer 3

Answer №2

To enhance the appearance of your content, consider applying styling to your divs and rows instead of individual table elements like tr.

For instance, try moving your order-statistics-row class to the row div for a cleaner design.

Check out this jsfiddle link for a demonstration:

https://jsfiddle.net/u5w971cr/3/

Answer 4

To enhance the appearance of your content, consider applying styling to your divs and rows instead of individual table elements like tr.

For instance, try moving your order-statistics-row class to the row div for a cleaner design.

Check out this jsfiddle link for a demonstration:

https://jsfiddle.net/u5w971cr/3/

Answer 5

Answer №3

To achieve a border below each row, modify the class you are using.

Instead of relying on the .order-statistics-row class, switch to your own .row class.

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

In this example, I used px, but feel free to change it back to pt.

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

Answer 6

To achieve a border below each row, modify the class you are using.

Instead of relying on the .order-statistics-row class, switch to your own .row class.

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

In this example, I used px, but feel free to change it back to pt.

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

Answer 7

Answer №4

Your code is missing table cells `` which are essential for creating structured tables. It's important to have these cells within your table rows, as they should hold the border styling, not the rows themselves.

While you may be able to make it work without them, it's not considered valid HTML per the HTML specification. For more information, check out @sideshowbarker's detailed explanation on this stackoverflow post.

If your data truly requires a tabular format, try implementing the layout without nesting divs inside tables, as this is generally discouraged. You can control column width using CSS and avoid relying on bootstrap grids within the table structure.

Additionally, pay attention to the `border-collapse` property applied to the table itself. This setting helps eliminate gaps between cell borders within the same row for a cleaner appearance.

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>

Answer 8

Your code is missing table cells `` which are essential for creating structured tables. It's important to have these cells within your table rows, as they should hold the border styling, not the rows themselves.

While you may be able to make it work without them, it's not considered valid HTML per the HTML specification. For more information, check out @sideshowbarker's detailed explanation on this stackoverflow post.

If your data truly requires a tabular format, try implementing the layout without nesting divs inside tables, as this is generally discouraged. You can control column width using CSS and avoid relying on bootstrap grids within the table structure.

Additionally, pay attention to the `border-collapse` property applied to the table itself. This setting helps eliminate gaps between cell borders within the same row for a cleaner appearance.

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>

Answer 9

Answer №5

Make sure to add the "order-statistics-row" class to the div for proper styling. For a live example, click here: https://jsfiddle.net/fv5n46Lc/1/

If you have any questions, feel free to reach out!


      <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>

Answer 10

Make sure to add the "order-statistics-row" class to the div for proper styling. For a live example, click here: https://jsfiddle.net/fv5n46Lc/1/

If you have any questions, feel free to reach out!


      <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>

How to create a stylish border line to separate rows using CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Changing the name of a tab within a p-tabview

The text box is intersecting with the photo

Using Javascript to generate a button that randomly chooses links within the webpage

Is there a way to disable a dropdown menu when clicking on a different one?

Tips for Organizing a Vast Array of Repetitive "Nth-Of-Type" CSS Selectors

Issue with useEffect EventListener in REACT HOOKS

What is causing my images to fail loading on IE but display properly on other browsers?

Enhance your images with a hover zoom effect while viewing an overlay on top

Elevate the block when encountering errors in HTML/CSS

What steps can I take to prevent the odd gaps from appearing in my horizontal flexbox gallery?

What is the best way to center text vertically within an image?

Choose a group of radio buttons inside a container when a button is clicked

Using Tailwind @apply within an Angular application's CSS file

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

What is the best way to resize an image for mobile site optimization?

Conceal navigation options on smaller screens and enable drop-down menu functionality with Bootstrap 3

AngularJS radio buttons are unable to be selected in a simplistic manner

I'm currently utilizing the react mui package, specifically @mui/x-date-pickers. Could someone kindly provide guidance on how to customize the color of the

Establish limits for draggable item

I am having trouble getting the jsTree ajax demo to load