CODEWITHSUNDEEP
htmlcss
ZeroZek
ZeroZek

Reputation: 319

border-bottom spacing

I would like to have some spacing between border-bottom, as it is on second picture. if I add padding-left, only text and checkbox will move to right. border-bottom stays the same.

form td.caption {
 font-weight: bold;
 border-bottom: 1px solid #d3d3d3;
 padding-top: 1em;
}

My code gives me this:

enter image description here

Style I want to achieve:

Style 2

Upvotes: 1

Views: 929

Answers (2)

Bhavin Shah
Bhavin Shah

Reputation: 2482

table td.caption {
   border-bottom: 1px solid #d3d3d3;
   padding-top: 1em;
   width:150px;
   font-size:12px;
}
table { 
    border-spacing: 7px;
    border-collapse: separate;
}
<table>
   <tr>
     <td class="caption">Select Chapters</td>
     <td class="caption" align="center"><input type="checkbox"></td>
   </tr>
</table>

Is this the same that you are looking for?

Hope this helps.

Upvotes: 1

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

table td.caption {
 font-weight: bold;
 border-bottom: 1px solid #d3d3d3;
 padding-top: 1em;
 min-width:100px;

}
table { 
    border-spacing: 10px;
    border-collapse: separate;
}
<table>
   <tr><td class="caption">test</td><td class="caption">2</td></tr>
   <tr><td></td><td></td></tr>
</table>

Upvotes: 1

Related Questions