原生js巧妙运用表格（适用于多数据滚动机制）

写作缘由

最近打比赛，需要制作可视化界面，可是笔者没有网页制作的基础，上手前端框架也需要学习周期，于是想着用单纯的html+css+js来写，用到啥就上网百度（因为用纯原生的来写，界面的美观度不敢保证哈哈）。在写页面时需要展示原始数据去重后的数据，以表格方式展示，于是就遇到了table结合滚动机制的功能。
先放一张效果图：
（因为是原生的东西写的所以美观性欠佳，“导出”按钮后面也会讲）

table-css代码

在这里插入代码片
* {
   
    margin: 0;//容器内距离
    padding: 0;//容器外距离
}

.scroll_table_ot {
   
    margin: 10px auto;
    line-height: 18px;//设置行间距
    width: 80%;//使用百分比，基于当前容器进行适配
    font-size: 14px;//文字大小
}

    .scroll_table_ot .scroll {
   
        max-height: 350px;//设置整个滚动窗口尺寸
        border: 1px solid #6a6a6a;
        border-top: 0;
        overflow-y: auto;
        border-right: 0;
    }

    .scroll_table_ot table {
   
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .scroll_table_ot th, .scroll_table_ot td {
   
        width: 75px;
        padding: 10px;
        border: 1px solid #6a6a6a;
        word-break:break-all;//设置当一行文字溢出的处理，即强制换行
        word-wrap:break-work;//与上连用
    }

    .scroll_table_ot th {
   
        font-weight: bold;
    }

    .scroll_table_ot thead th:last-child, .scroll_table_ot tbody td:last-child {
   
        width: auto;
    }

    .scroll_table_ot tbody tr:first-child td {
   
        border-top: 0;
    }

    .scroll_table_ot tbody tr:last-child td {
   
        border-bottom: 0;
    }

    .scroll_table_ot tbody tr td:first-child {
   
        border-left: 0;
    }

    .scroll_table_ot tbody tr td:last-child {
   
        border-right: 0;
    }

table-html代码

<div class="scroll_table_ot">