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文件

用于其他边框属性的border-style&preval=none