加爾斯表格造型

我有下面的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>

預期和電流輸出如下

電流： Current

預計： Expected

感謝

來源

2013-12-09 user2423959

你可以分享你的嘗試嗎？ – TreeTree

請分享一下CSS –

顯示圍繞表格的邊框：

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/這樣的教程來掌握它。

來源

2013-12-09 15:33:33

嗨@mritz這裏如果你看到的第一個案例（1和3圖片），只有外部邊框，那就是我想要實現的。感謝您的回覆 – user2423959

現在更簡單了。查看更新後的答案。 –

感謝@ mritz_p，這裏出現了真正的問題，當我在這裏添加第二個表格時，它顯示了兩個邊框，其中我想要一個brders和另一個沒有邊框，對不起，我更新了你的小提琴。 – user2423959

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

<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其他邊框屬性

來源

2013-12-09 15:32:43 MustafaP

Hi @ user2688655：這裏如果你看到第一個案例（1和3張圖片），那麼只有外部邊框，那就是我想要實現的。感謝您的回覆 – user2423959

加爾斯表格造型

回答

相關問題