el-scrollbar滚动表格时表头边框处有间隙的问题css

 表头固定，滚动时不出现边框间隙

<div class="list">
        <table>
          <tr>
            <th>设备名称</th>
            <th width="60">数据</th>
            <th width="60">控制</th>
          </tr>
        </table>
        <el-scrollbar class="list-scroll">
          <table>
            <tr v-for="item in craftData" :key="item.prop">
              <td>{{ item.craftName }}</td>
              <td width="60">{{ item.tagValue }}</td>
              <td width="60"><el-switch style="--el-switch-on-color: #28c3f8" v-model="item.checked"
                  @change="handleSwitchChange(item)"></el-switch></td>
            </tr>
          </table>
        </el-scrollbar>
      </div>

.list {
      position: absolute;
      z-index: 2;
      top: 315px;
      left: 110px;
      width: 288px;
      color: white;

      .list-scroll {
        height: 333px;
        border-bottom: 1px solid #4a80e7;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th {
        height: 35px;
        border: 1px solid #4a80e7;
        font-weight: bold;
        text-align: center;
        font-size: 12px;
        padding: 8px 10px;
        background-color: #123e9e;
      }

      td {
        border: 1px solid #4a80e7;
        border-top: none;
        font-size: 12px;
        text-align: center;
        padding: 2px 4px;
      }

      tr:nth-last-child(1) {
        td {
          border-bottom: none;
        }        
      }

      tr:nth-child(odd) {
        background-color: rgba($color: #4d95eb, $alpha: 0.1);
      }
    }

原文地址：https://blog.csdn.net/weixin_43337481/article/details/143910091

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！