Using an <hr> tag with a table?

The best way to add a horizontal line between rows is with a CSS borders. First, you want to collapse all the borders of the table so that there is no space between the cells (this might help your solution as well, but I don't recommend using hr for this purpose). Next, specify a border on the bottom-side of each cell (td). You can similarly put borders to the left, right, up, etc. See the self-contained HTML below.

<html>
<head>
    <style type='text/css'>
        table.test { border-collapse: collapse; }
        table.test td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <table class='test'>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    </table>
</body>
</html>

For more border options, check this w3Schools page.


You can try this, it is working perfectly:

<tr>
    <td colspan="Number of columns">
        <hr>
    </td>
</tr>

I'd suggest putting:

<tr style="border-bottom: 1px solid #000;">

on every row you want the line to be on. You can also do this individually for each cell.

Update

Id recommend using a css class and a have a separate stylesheet if you can. For example

<tr class="bordered"></tr>

tr.bordered {
    border-bottom: 1px solid #000;
}

You can define a CSS class for your 'separated' <tr>:

<style>
tr.separated td {
    /* set border style for separated rows */
    border-bottom: 1px solid black;
} 

table {
    /* make the border continuous (without gaps between columns) */
    border-collapse: collapse;
}
</style>

Then just mark required rows:

 <tr>
      <td>
      <td>
 </tr>
 <tr class="separated">
      <td>
      <td>
 </tr>
 <tr>
      <td>
      <td>
 </tr>

See example https://jsfiddle.net/64nydcfu/1/

Tags:

Html

Recent Posts