Cals表样式

时间:2013-12-09 15:14:20

标签: html css formatting css-tables

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

预期和当前产出如下

电流: Current

预期: Expected

由于

2 个答案:

答案 0 :(得分:2)

显示表格周围的边框:

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

答案 1 :(得分:0)

如果我理解正确,你只想删除边框。

<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用于其他边框属性

相关问题