how do i insert a horizontal line in html table to separate rows

Question

My code is below, I would like to add horizontal lines within the table to separate each row's content:

.Favourites-table {
  position: relative;
  width: 70%;
  text-align: center;
  /*border: 1px solid orangered;*/
  margin: 0 auto;
  top: 130px;
  height: 300px;
}

.Favourites-table th {
  position: relative;
  border: 1px solid orangered;
  color: #fd886b;
  width: 100%;
  height: 300px;
}

.horizontal-line {
  position: relative;
  width: 100%;
  background-color: orangered;
  padding: 1px 0px;
}

.Favourites-table tr {
  position: relative;
  border: 1px solid orangered;
  width: 100%;
  height: 100px;
}

<table class="Favourites-table">
  <tr class="Favourites-titlerow">
    <th>Search name</th>
    <th>Email notifications</th>
    <th>options</th>
  </tr>
  <tr class="Favourites-row">
    <td>
      <image src="../1x/"></image>
      <h4>wetpoo</h4>
    </td>
    <td><span id="emailnotify-on" style="display: none;"><a href="#">On</a></span> <span class="hide-off" id="emailnotify-off" style="display: inline;"><a href="#">Off</a></span></td>
    <td> <a class="delete-row" href="#">Delete <a class="edit-search" href="#">Edit search</a></td>
  </tr>
  <tr class="Favourites-row">
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

I tried styling the TH and TR to add the line in, and I also tried to create a line using <hr> and add it in the table but I can't get any of it to work.

Did you try anything, can you share that CSS? Where did you get stuck? — David Thomas, Oct 15 '20 at 11:13
YEAH I tried styling the and the to add a horizontal line and i also tried to manually add one in to the table using
but i cant get it right — Demon King, Oct 15 '20 at 11:18

score 0 · Accepted Answer · answered Oct 15 '20 at 11:32

You don't need anything more than to set a border-bottom on tr > td.

To skip having a border on the last table row, use tr:not(:last-of-type) > td.

You may set a border directly on the <tr> instead of the <td> but you may run into problems with CSS's table formatting model (which is completely unrelated and separate from CSS's display: grid formatting model, btw).

Also, you should use explicit <thead> and <tbody> elements (they always exist in the DOM) (as a bonus, this makes it easier to use position: sticky; and means you don't need a separate CSS class name).

So change your CSS and HTML to something like this snippet below:

(Note that the table needs at least two rows for the border-bottom to be visible, otherwise the single row in a table will won't match the :not(:last-of-type) selector so it won't render the border.

table.Favourites-table > tbody > tr:not(:last-of-type) > td {
    border-bottom: 3px solid black;
}

/* Additional styles you might want to use too: */
table.Favourites-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #eee;
}
table.Favourites-table > thead > tr > * {
    position: sticky;
    top: 0;
    background-color: orange; /* `position: sticky;` Needs an opaque background */
}

<table class="Favourites-table">
    <thead>
        <tr>
            <th>Search name</th>
            <th>Email notifications</th>
            <th>options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <img src="../1x/" alt="picture" />
                <h4>wetpoo</h4>
            </td>
            <td>
                <span id="emailnotify-on" style="display: none;"><a href="#">On</a></span>
                <span class="hide-off" id="emailnotify-off" style="display: inline;"><a href="#">Off</a></span>
            </td>
            <td>
                <a class="delete-row" href="#">Delete <a class="edit-search" href="#">Edit search</a>
            </td>
        </tr>
        
        <tr>
            <td>
                <img src="../1x/" alt="picture" />
                <h4>wetpoo</h4>
            </td>
            <td>
                <span id="emailnotify-on" style="display: none;"><a href="#">On</a></span>
                <span class="hide-off" id="emailnotify-off" style="display: inline;"><a href="#">Off</a></span>
            </td>
            <td>
                <a class="delete-row" href="#">Delete <a class="edit-search" href="#">Edit search</a>
            </td>
        </tr>
        
        <tr>
            <td>
                <img src="../1x/" alt="picture" />
                <h4>wetpoo</h4>
            </td>
            <td>
                <span id="emailnotify-on" style="display: none;"><a href="#">On</a></span>
                <span class="hide-off" id="emailnotify-off" style="display: inline;"><a href="#">Off</a></span>
            </td>
            <td>
                <a class="delete-row" href="#">Delete <a class="edit-search" href="#">Edit search</a>
            </td>
        </tr>
    </tbody>
</table>

thank you @Dai this worked and was very helpful may the wetpoo bless you on your perilous journey of coding adventures — Demon King, Oct 15 '20 at 12:13

how do i insert a horizontal line in html table to separate rows

1 Answers1