最近项目里面一直要用到表格的使用,有一些样式可以使用,使表格边框看起来更好看一点
colspan横向占用几格单位,rowspan,纵向占用几格单位
image.png
<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;
}
