Vue自定义Table

目录

• 1、html
• 2、css

 

---

回到顶部

1、html

    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr class="data-table-header">
            <th style="width: 120px">预警时间</th>
            <th>单位名称</th>
            <th>预警级别</th>
            <th>监测项</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in listData" :key="item.id">
            <td style="width: 120px">{{ item.dateTime }}</td>
            <td>{{ item.linkUnit }}</td>
            <td>{{ item.dutyPerson }}</td>
            <td>{{ item.lingType }}</td>
          </tr>
        </tbody>
      </table>
    </div>

回到顶部

2、css

.data-table tbody tr:hover {
    background-color: rgba(0, 114, 255, 0.1);
  }
  .data-table td {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    height: 37px;
    border-bottom: 1px solid rgba(0, 198, 255, 0.5);
  }
  .data-table th {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #e8f9fe;
    height: 30px;
  }
  .data-table tbody {
    display: block;
    height: 160px;
    overflow-y: auto;
  }
  .data-table tbody::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .data-table tbody::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 2px;
    height: 100px;
    box-shadow: inset 0 0 5px rgba(0, 198, 255, 0.5);
    background: rgba(0, 0, 0, 0.8);
  }
  .data-table tbody::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }
  .data-table-header {
    border-bottom: rgba(0, 198, 255, 1);
    background-color: rgba(0, 114, 255, 0.3);
  }
  .data-table thead,
  .data-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .data-table {
    color: #ffffff;
    width: 380px;
    border-collapse: collapse;
    text-align: center;
    margin-top: 10px;
  }
  .data-table  tr:nth-child(even){    
    background:#fff;
}
.data-table tr:nth-child(odd){    
    background:#f5f2eb;
}