这两天博主可被table表格样式给整死了,今天分享一套比较美观的table表格样式给大家
html:
<table class="table table-bordered table-hover table-condensed">
<tbody>
<tr>
<th>项目名称</th>
<td><input v-model="projectForm.xxx" class="form-control" type="text" autocomplete="off"></td>
</tr>
<tr>
<th>项目类型</th>
<td>
<select v-model="projectForm.xxx" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
</tbody>
</table>
css:
.table {
width: calc(100% - 10px);
max-width: calc(100% - 10px);
margin-bottom: 20px;
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
}
.table-bordered {
border: 1px solid #ddd;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td{
padding: 8px;
line-height: 1.42857143;
vertical-align: center;
border: 1px solid #ddd;
}
th{
padding: 8px;
width: 400px;
line-height: 1.42857143;
vertical-align: center;
border: 1px solid #ddd;
text-align: left;
}
大家也可以按照自己需求进行更改!