冻结多个引导程序表列

Question

我在固定引导程序列方面遇到问题。我从其他解决方案中获取了参考，但它们并没有太大帮助。我想要4个固定列，这些列将根据内容调整左位置而不会重叠。目前，我正在这样做通过手动给元素定位。

.scroller {
  width:80%;
  overflow:scroll;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block;
}

.table-fixed tr:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

.table-fixed tbody td,
.table-fixed thead > tr > th {
  float: left;
}

.table-fixed tbody {
  height: 350px;
  overflow-y: auto;
  width: 100%;
}

.tablecolumnfixed th:first-child,.tablecolumnfixed th:nth-child(2),.tablecolumnfixed th:nth-child(3), .tablecolumnfixed th:nth-child(4),.tablecolumnfixed td:nth-child(2),.tablecolumnfixed td:nth-child(3),.tablecolumnfixed td:nth-child(4),.tablecolumnfixed td:first-child {
  position: sticky;

}

.tablecolumnfixed th:nth-child(2),.tablecolumnfixed td:nth-child(2){
  left: 15%;
  background: #212529;
}

.tablecolumnfixed th:nth-child(3),.tablecolumnfixed td:nth-child(3){
  left: 31%;
  background: #2c3034;;
}

.tablecolumnfixed th:nth-child(4),.tablecolumnfixed td:nth-child(4){
  left: 48%;
  background: #212529;
}

.tablecolumnfixed th:first-child,.tablecolumnfixed td:first-child{
  left: 0px;
  background: #2c3034;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<div class="scroller">
    <table class="table table0 table-striped table-dark table-bordered tablecolumnfixed" id="myTable">
        <thead>
            <tr>
                <th>S.N</th>
                <th>type1</th>
                <th>type2</th>
                <th>type3</th>
                <th>type4</th>
                <th>type5</th>
                <th>type6</th>
            </tr>
        </thead>
        <tbody id="rowid">
            <td>Index</td>
            <td>one</td>
            <td>two</td>
            <td>three</td>
            <td>four</td>
            <td>five</td>
            <td>six</td>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

更改数据时，存在重叠的问题，因为我已手动设置了左侧位置。在不使用任何插件的情况下如何通过Jquery或JavaScript做到这一点？