Book index layout style with bottom line in HTML and CSS

Question

How can I achieve this layout in HTML & CSS ?

Maybe with a table, but I need the center column to fill the blank space with a border-bottom (or something else)

Here is a codepen

<table class="table">

  <tbody>

    <tr>

      <td>

        <h5>Index 1</h5></td>

      <td>

        <span class="line">&nbsp;</span>

      </td>

      <td>

        Content

      </td>

    </tr>

    <tr>

      <td>

        <h5>Index 2</h5></td>

      <td>

        <span class="line"></span>

      </td>

      <td>

        Content

      </td>

    </tr>

  </tbody>

</table>

Thank you for your help.

Answer 1

If you are using table then you can achieve the same by following codes

table {
  width: 50%;
  border-collapse: collapse;
  white-space: nowrap;
}
table h5 {
  margin: 0;
}
td,
tr,
table {
  padding: 0;
}
td:nth-child(2) {
  border-bottom: 1px solid;
  width: 100%;
}

<table class="table">
  <tbody>
    <tr>
      <td>
        <h5>Index 1</h5>
      </td>
      <td>
        <span class="line">&nbsp;</span>
      </td>
      <td>
        Content
      </td>
    </tr>
    <tr>
      <td>
        <h5>Index 2</h5>
      </td>
      <td>
        <span class="line"></span>
      </td>
      <td>
        Content
      </td>
    </tr>
  </tbody>
</table>

Book index layout style with bottom line in HTML and CSS

Sign up