CSS Question
Book index layout style with bottom line in HTML and CSS
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"> </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 Source
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"> </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>