表格 table (基础表格)
html
<div class="box">
<table class="table">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
</tr>
<tr>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
</tr>
<tr>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
</tr>
<tr>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
</tr>
<tr>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
<td>表格001</td>
</tr>
</tbody>
</table>
</div>
css
.box {
width: 70%;
margin: 0 auto;
}
/* 清空表格默认样式 */
table{
background-color:transparent;
/* 表格塌陷 */
border-collapse:collapse;
border:0;
}
th {
font-weight: bold;
color: #909399;
}
.table {
width: 100%;
min-width: 100%;
margin-bottom: 20px;
}
.table td{
border:1px solid #e0e0e0;
border-left:1px solid transparent;
border-right:1px solid transparent;
color: #606263;
padding: 10px 0 10px 15px;
}
.table > thead > tr > th {
text-align: left;
font-weight: 600;
color: #606263;
padding: 10px 0 10px 15px;
}