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

CSS can be utilized to craft intricate and dynamic shapes

Line up with miniature stature

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

Splitting a square into four triangles using CSS styling

In order to properly set up Require JS, you will need to configure the JS settings

Include IE-specific stylesheet code in your Angular application (version 1.2)

Display or conceal content based on checkbox status

Submitting modal form information using AJAX to PHP

Unusual symbols in HTML code

Get the file from the web browser

What is the best way to enlarge a thumbnail using CSS?

Having trouble deleting files in PHP?

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Activate a CSS class on click using JavaScript

The issue arises when trying to use jQuery on multiple elements with the same class

What is the proper way to add process.env.PORT to the script declarations string within my package.json file?

Using Node.js and the Jade templating engine, display the value of a passed variable

Is it possible to integrate HTML pages as sections within an HTML file using AngularJS?

Loads a PHP file automatically using the URL from a jQuery Ajax method

The malfunction of CSS3 effect