圖書索引布局風格與HTML和CSS中的底線

Question

如何在HTML中實現此佈局& CSS？

也許有一張桌子，但我需要的中心柱，以填補與邊框底部的空格（或別的東西）

這裏是一個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> 

Answer 1

試試這個

<table class="table"> 
    <tbody> 
    <tr> 
     <td class="Index"> 
     <h5>Index 1</h5> 
     </td> 

     <td> 
     Content 
     </td> 
    </tr> 
    <tr> 
     <td class="Index"> 
     <h5>Index 11</h5> 
     </td> 

     <td> 
     Content 
     </td> 
    </tr> 
    </tbody> 
</table> 

< ---- CSS ----->

table { 
    width: 50%; 
    border-collapse: collapse; 
    white-space: nowrap; 
} 
table h5 { 
    margin: 0; 
    display:inline-block; 
} 
td, 
tr, 
table { 
    padding: 0; 
    overflow:hidden 
} 

.Index::after{ 
    content:""; 
width:100%; 
    display:inline-block; 
background-color:#000; 
height:1px;} 

Answer 2

如果你是使用表，那麼你可以通過以下代碼實現相同

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>