table表格

最近项目里面一直要用到表格的使用,有一些样式可以使用,使表格边框看起来更好看一点
colspan横向占用几格单位,rowspan,纵向占用几格单位

 <table border="1"
                               style="width:100%;margin:0 auto">
                            <tr algin="center">
                                <td colspan="10"
                                    style="width:100%;height:50px">体能考核项目以及对应的考核标准信息</td>
                            </tr>
                            <tr algin="center">
                                <th colspan="1"
                                    style="width:5%">序号</th>
                                <th colspan="2"
                                    style="width:30%">考核项目</th>
                                <th colspan="2"
                                    style="width:20%">优秀标准</th>
                                <th colspan="2"
                                    style="width:20%">良好标准</th>
                                <th colspan="2"
                                    style="width:20%">及格标准</th>
                                <th colspan="1"
                                    style="width:5%">操作</th>
                            </tr>
                            <tr v-for="(item,index) in form.examineType.physicalResults"
                                :key="index">
                                <td style="height:50px">{{index+1}}</td>
                                <td colspan="2"
                                    style="height:50px">
                                    <!-- <a-input
                                             v-model="item.examineProject"
                                             :maxLength="20"
                                             placeholder="最多可输入20字符" /> -->
                                    <a-form-model-item label=""
                                                       :labelCol="{span:0}"
                                                       :wrapperCol="{span:24}"
                                                       :prop="'examineType.physicalResults.'+index+'.examineProject'"
                                                       :rules="ValidateRules.ValidateRequired">
                                        <a-textarea style="width:90%;margin-top:4px"
                                                    placeholder="最多可输入20字符"
                                                    v-model="item.examineProject"
                                                    :maxLength="20"
                                                    :rows="2" />
                                    </a-form-model-item>
                                </td>
                                <td colspan="2"
                                    style="height:50px">
                                    <a-form-model-item label=""
                                                       :labelCol="{span:0}"
                                                       :wrapperCol="{span:24}"
                                                       :prop="'examineType.physicalResults.'+index+'.excellent'"
                                                       :rules="ValidateRules.ValidateRequired">
                                        <a-input style="width:90%;color:black"
                                                 v-model="item.excellent"
                                                 :maxLength="10"
                                                 placeholder="最多可输入10字符" />
                                    </a-form-model-item>
                                </td>
                                <td colspan="2"
                                    style="height:50px">
                                    <a-form-model-item label=""
                                                       :labelCol="{span:0}"
                                                       :wrapperCol="{span:24}"
                                                       :prop="'examineType.physicalResults.'+index+'.fine'"
                                                       :rules="ValidateRules.ValidateRequired">
                                        <a-input style="width:90%;color:black"
                                                 v-model="item.fine"
                                                 :maxLength="10"
                                                 placeholder="最多可输入10字符" />
                                    </a-form-model-item>
                                </td>
                                <td colspan="2"
                                    style="height:50px">
                                    <a-form-model-item label=""
                                                       :labelCol="{span:0}"
                                                       :wrapperCol="{span:24}"
                                                       :prop="'examineType.physicalResults.'+index+'.pass'"
                                                       :rules="ValidateRules.ValidateRequired">
                                        <a-input style="width:90%;color:black"
                                                 v-model="item.pass"
                                                 :maxLength="10"
                                                 placeholder="最多可输入10字符" />
                                    </a-form-model-item>
                                </td>
                                <td style="height:50px">
                                    <a style="font-size: 14px;color:red"
                                       v-if="form.examineType.physicalResults.length!==1"
                                       @click="handlerStamina('del', index)">删除</a>
                                </td>
                            </tr>
                        </table>

// 自定义table
table {
    *border-style: solid;
    *border-color: #333;
    *border-width: 1px 0 0 1px;
    font-size: 16px;
    border-collapse: collapse;
}
th,
td {
    margin: 0;
    padding: 0;
}

table td,
table th {
    border-width: 1px;
    *border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #3e658b;
    background-color: #ffffff;
    box-sizing: border-box;
    text-justify: inter-ideograph;
    text-align: center;
    color: black;
}
table th {
    color: #3e658b;
    background-color: #e8f1ff;
    text-align: center;
    height: 50px;
}
.border0 {
    padding: 0;
    *border-width: 0;
}
.border0 table {
    margin-left: -1px;
    margin-left: 0\9;
    border-style: hidden;
    *border-style: solid;
    border-width: 0;
}

td input {
    width: 60%;
    border-color: #3e658b;
    text-align: center;
    color: black;
}