边界底部间距

Question

我希望border-bottom之间有一些间距，因为它位于第二张图片上。如果我添加padding-left，则只有文字和复选框会向右移动。 border-bottom保持不变。

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

我的代码给了我这个：

  

我希望实现的风格：

  

Answer 1

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>

Answer 2

＆＃13;

＆＃13;

table td.caption {
   border-bottom: 1px solid #d3d3d3;
   padding-top: 1em;
   width:150px;
   font-size:12px;
}
table { 
    border-spacing: 7px;
    border-collapse: separate;
}

＆＃13;

<table>
   <tr>
     <td class="caption">Select Chapters</td>
     <td class="caption" align="center"><input type="checkbox"></td>
   </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

这与您正在寻找的相同吗？

希望这有帮助。