我有下面的 HTML 表(cals 表),这里我需要一些 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 □ Female</div>
</td>
<td>
<div class="para">Occupation</div>
</td>
<td>
<div class="para">An apprentice</div>
<div class="para">□ Yes □ No</div>
</td>
</tr>
</tbody>
</table>
预期和当前输出如下
当前:
预期:
谢谢
最佳答案
在表格周围显示边框:
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/ 这样的教程。去掌握它。
关于html - Cals 表格样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20473998/