html - Cals 表格样式

Question

我有下面的 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&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/ 这样的教程。去掌握它。