2017-04-13 138 views
0

我正在創建一個假模板,其中我使用引導程序進行響應。
但其佔據labelcolonenter image description here標籤和冒號之間的空格

之間。這裏有更多的空間我我code.how可以減少labelcolon
https://jsfiddle.net/zewykeLm/
我想是這樣,如果有任何其他的好辦法,請給我建議

之間的空間enter image description here

+0

你可以用它代替電網 –

回答

1

試試這個。使用表和::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

0

通過更換這

<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>