<div class="gxtjcontent">
<table>
<thead>
<tr>
<th>序号</th>
<th>管线</th>
<th>温度(°C)</th>
<th>压力(Map)</th>
<th>流量(t/h)</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.age }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
user: { 'name': '', 'age': '', 'school': '' },
users: [
{ 'name': '李磊', 'age': '25', 'school': '洛阳理工' },
{ 'name': '张成', 'age': '23', 'school': '桂林电子科技' },
{ 'name': '炼心', 'age': '22', 'school': '江西电子科技' }
],
table {
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
/*设置相邻单元格的边框间的距离*/
border-spacing: 0;
/*表格设置合并边框模型*/
border-collapse: collapse;
thead {
display: table;
width: calc(100% - 30px);
margin-left: 15px;
height: 40px;
color: #ffffff;
font-weight: 400;
table-layout: fixed; // 表格固定
th {
// border: 1px solid #fff;
}
}
tbody {
display: block;
height: calc(100% - 40px);
width: calc(100% - 30px);
margin-left: 15px;
color: #fff;
overflow-y: auto;
border-top: 1px solid #888888;
tr {
display: table;
width: 100%;
table-layout: fixed;
height: 40px;
text-align: center;
td {
// border: 1px solid #fff;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
}
}
tr:nth-child(odd) {
background-color: #0d335b;
}
tr:hover {
// background-color: #08a850;
}
}
}
/* 滚动条宽度 */
::-webkit-scrollbar {
width: 5px;
background-color: transparent;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
// border-radius: 5px;
// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #fff;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
// border-radius: 5px;
background: #8b8989;
}