Book index layout style with bottom line in HTML and CSS -
how can achieve layout in html & css ? 
maybe table, need center column fill blank space border-bottom (or else)
here 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>      
try this
<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;}      
Comments
Post a Comment