加爾斯表格造型

Question

我有下面的HTML表格（加侖表），在這裏我需要一些顯示輸出截圖（邊框部分）的CSS。

<div class="para">To the Commissioner for Labour</div> 
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4"> 
    <colgroup> 
     <col class="colname-c1 colwidth-25.00%"></col> 
     <col class="colname-c2 colwidth-25.00%"></col> 
     <col class="colname-c3 colwidth-25.00%"></col> 
     <col class="colname-c4 colwidth-25.00%"></col> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td colspan="4" align=""> 
       I declare that the information given in this form is, to the 
       best of my knowledge, true and accurate.Signature: ___________ 
       (for and on behalf of the employer)Name (in block letters): ____ 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="para">Position:</div> 
      </td> 
      <td> 
       <div class="para">□ Sole proprietor</div> 
      </td> 
      <td> 
       <div class="para">□ Partner</div> 
      </td> 
      <td> 
       <div class="para"></div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="para"></div> 
      </td> 
      <td> 
       <div class="para">□ Manager</div> 
      </td> 
      <td> 
       <div class="para">□ Officer</div> 
      </td> 
      <td> 
       <div class="para"></div> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2" align="">Date: __________________________</td> 
      <td> 
       <div class="para"></div> 
      </td> 
      <td> 
       <div class="para">__________________________________</div> 
       <div class="para">Chop of Company <span class="font-style-bolditalic">(Note 1)</span> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<div class="para align-center"><span class="font-style-bold">Part I</span></div> 
<div class="para"> <span class="font-style-italic">A. Particulars of the employee</span> 

</div> 
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4"> 
    <colgroup> 
     <col class="colname-c1 colwidth-25.00%"></col> 
     <col class="colname-c2 colwidth-25.00%"></col> 
     <col class="colname-c3 colwidth-25.00%"></col> 
     <col class="colname-c4 colwidth-25.00%"></col> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td colspan="3" align="">Name of employee (Surname first)</td> 
      <td> 
       <div class="para">Identity Card/Passport No.</div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="para">Telephone No.</div> 
      </td> 
      <td> 
       <div class="para">Fax No.</div> 
      </td> 
      <td colspan="2" align="">Address</td> 
     </tr> 
     <tr> 
      <td> 
       <div class="para">Date of birth</div> 
       <div class="para">_____/_____/____</div> 
       <div class="para">Day/Month/Year</div> 
      </td> 
      <td> 
       <div class="para">Sex</div> 
       <div class="para">□ Male&nbsp;&nbsp;□ Female</div> 
      </td> 
      <td> 
       <div class="para">Occupation</div> 
      </td> 
      <td> 
       <div class="para">An apprentice</div> 
       <div class="para">□ Yes&nbsp;&nbsp;□ No</div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

預期和電流輸出如下

電流：

預計：

感謝

Answer 1

顯示圍繞表格的邊框：

table { 
    border: 1px solid; 
} 

要防止細胞周圍的邊界（td）：

table td { 
    border: none; 
} 

要對齊文本的左側和添加一些間距：

table td { 
    padding: 3px; 
    text-align: left; 
} 

可以樣式基於我已經提供了第一個例子中的第二個表。

實施例：http://jsfiddle.net/KTZL6/1

然而，這是非常基本的CSS。你可能最好通過http://www.cssbasics.com/introduction-to-css/這樣的教程來掌握它。

Answer 2

如果我理解正確的，你只需要刪除邊框。

<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4" border="0"> 

您可以使用邊界= 「0」，沒有必要和外部CSS文件

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none其他邊框屬性