在开发过程中很多时候需要用到原生table来展示数据,简单使用一下。
权当一个模板吧。好用的话,有什么建议的话欢迎评论!!!
效果
代码
<table border="1" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<th colspan="1" align="left">*培训班名称</th>
<td colspan="7"></td>
</tr>
<tr>
<th colspan="1" align="left">*关联培训项目</th>
<td colspan="7"></td>
</tr>
<tr>
<th rowspan="1" align="left">*培训类型</th>
<td colspan="3"></td>
<th rowspan="1" align="left">*培训对象</th>
<td colspan="3"></td>
</tr>
<tr>
<th rowspan="1" align="left">*培训开始时间</th>
<td colspan="3"></td>
<th rowspan="1" align="left">*培训结束时间</th>
<td colspan="3"></td>
</tr>
<tr>
<th rowspan="1" align="left">*培训地点</th>
<td colspan="3"></td>
<th rowspan="1" align="left">*报名截止时间</th>
<td colspan="3"></td>
</tr>
<tr>
<th rowspan="1" align="left"><span>*</span>培训机构</th>
<td colspan="3"></td>
<th rowspan="1" align="left">培训班班主任</th>
<td colspan="3"></td>
</tr>
<tr height="60px">
<th rowspan="2" align="left">*培训目的</th>
<td colspan="6"></td>
</tr>
</tbody>
</table>
#样式
table {
width: 98%;
border-collapse: collapse;
}
table,
table tr th,
table tr td {
border: 1px solid rgba(236, 238, 242);
padding: 8px;
height: 30px;
}
table tr th {
font-size: 15px;
color: #393d4e;
}
table tr td {
border: 1px solid rgba(236, 238, 242);
padding: 8px;
height: 30px;
font-size: 14px;
color: #606266;
}
table tr:nth-child(5) td {
width: 35%;
}