Question 419734 in Html Question posted in
Some basic documentation can be found here.

Html – Fill available space (table cell, or div) with horizontal line

I want to make an HTML/CSS leadsheet for music. I am using a HTML table to arrange the chords just above the lyrics:

<tr>
  <td>Csus4</td>
  <td>G</td>
</tr>
<tr>
  <td>Ly</td>
  <td>rics</td>
</tr>
</table>

Output:

Output

I want that the remaining space between "Ly" and "rics" is filled with some kind of horizontal line, so that I get something like this:

Desired output

Currently, I use HTML tables, but I don’t mind using divs or anything else as well.

I have tried a lot using divs and CSS, but failed so far. Thanks for any help.

Tags:

2

Answers


  1. 0

    Use a pseudo element

    .line {
  display: flex;
  align-items: center;
}

.line:after {
  content: "";
  flex: 1;
  height: 1px;
  background: red;
  margin-left: 4px;

}
    <table>
  <tr>
    <td>Csus4</td>
    <td>G</td>
  </tr>
  <tr>
    <td class="line">Ly</td>
    <td>rics</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    The problem with using display:flex on table cells is that if you’ve got multiple consecutive cells needing the line it will break the table structure. I suggest using an absolute positioned pseudo element with a linear gradient background to better preserve the table structure:

    tr:nth-child(2n) td {
  position:relative;
  &::after {
    content: '';
    position: absolute;
    height: 1em;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    width: stretch;
    margin-inline: 0.1em;
    --vpos: 0.65em;
    --thick: 0.06em;
    background-image:linear-gradient(to bottom, 
       transparent var(--vpos), 
       black var(--vpos), 
       black calc(var(--vpos) + var(--thick)), 
       transparent calc(var(--vpos) + var(--thick)));
  }
}
body {
  font-size: 2em;
}
    <table>
  <tr>
    <td>Csus4</td>
    <td>Csus4</td>
    <td>G</td>
  </tr>
  <tr>
    <td>Ly</td>
    <td>Ly</td>
    <td>rics</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search