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/ 之类的教程来掌握它。

Answer 2

如果我理解正确，您只想删除边框。

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

可以使用border="0"，不需要和外部css文件

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none 用于其他边框属性