标签和冒号之间的空格

问题描述:

我正在创建一个假模板,其中我使用引导程序进行响应。
但其占据labelcolonenter image description here标签和冒号之间的空格

之间。这里有更多的空间我我code.how可以减少labelcolon
https://jsfiddle.net/zewykeLm/
我想是这样,如果有任何其他的好办法,请给我建议

之间的空间enter image description here

+0

你可以用它代替电网 –

试试这个。使用表和::before选择器。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <style> 
 
     table tbody tr td:nth-child(2)::before { 
 
      content: " :"; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table> 
 
     <tbody> 
 
      <tr> 
 
       <td>Employee name</td> 
 
       <td>bnhvg</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Requested Leave from</td> 
 
       <td>bnhvg</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Requested Leave from</td> 
 
       <td>bnhvg</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Total Time requested</td> 
 
       <td>bnhvg</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Leave Type</td> 
 
       <td>bnhvg</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
</body> 
 

 
</html>

+0

表中,我们可以使用一个以上的'在一个页面table'标签更正代码中的错误?因为我也需要使用表格作为底部内容。 – user7397787

+0

是的,这是可能的。只需添加多个表,并将工作,你肯定 – Nitheesh

+0

是否可以改变我的HTML代码为XML? https://jsfiddle.net/8ov5yrg6/ – user7397787

通过更换这

<div class="container"> 
<section class="col-lg-10 col-md-10 col-sm-10 col-xs-10" style="margin-top:4%;"> 
    <div style="text-align: right;"><label>Date:</label>&nbsp;<span>#sentDate#</span></div> 
    <table> 
    <tbody> 
     <tr> 
      <td><label>Employee name</label></td> 
      <td>#empName#</td> 
     </tr> 
     <tr> 
      <td><label>Employee Id</label></td> 
      <td>#empId#</td> 
     </tr> 
     <tr> 
      <td><label>Requested Leave from</label></td> 
      <td>#levFrom#</td> 
     </tr> 
     <tr> 
      <td><label>Requested Leave To</label></td> 
      <td>#levTo#</td> 
     </tr> 
     <tr> 
      <td><label>Total Time requested</label></td> 
      <td>#totalTime#</td> 
     </tr> 
     <tr> 
      <td><label>Leave Type</label></td> 
      <td>#levType#</td> 
     </tr> 
    </tbody> 
</table> 
<div><label>Special notes:</label></div> 
    <div style="margin: 20px 0 20px 0;"> 
     #I have given propernotice to all pertinent parties that I will be out of the office for the period of time listed above and have made arrangements for coverage of all my office responsibilites.# 
    </div> 
    <div style="text-align: left;"><label> Regards</label></div> 
    <table> 
     <tbody> 
       <tr> 
        <td><label>Name</label></td> 
        <td>#name#</td> 
       </tr> 
       <tr> 
        <td><label>Mobile Number</label></td> 
        <td>#mobNum#</td> 
       </tr> 
     </tbody> 
    </table> 
    </section> 
    </div>