Колонки были перекрыты при попытке заморозить одну

Question

В приведенном ниже коде он перекрывает первые два столбца. Если удалить absolute тогда это выглядит правильно, но не может заморозить колонку. Как это можно исправить, чтобы заморозить первый столбец.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    .f-sticky-col {
    position:absolute;
      width:100px;
        }

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <div class="table-responsive">
    <table cellspacing="0" width="100%" class="table table-striped table-bordered nowrap table-hover">
    <thead><tr><th  class="f-sticky-col"><label class="control-label" style="cursor: pointer;">
                                                    
                                                  </label></th>
                                                    <th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                   IdentNumber
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                    Name
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                   Alias Number
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                    Value
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                    Quartr
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: default;">
                                                    Field
                                                    <!----></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: default;">
                                                  Field2
                                                    <!----></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                   Field3
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                    Field4
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                   Field5
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                   Field6
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: default;">
                                                   Field7
                                                    <!----></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: pointer;">
                                                   Field8
                                                    <span class="arrow-order asc"></span></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: default;">
                                                  Field9
                                                    <!----></label></th><th nowrap="nowrap" class=""><label class="control-label" style="cursor: default;">
                                                  Field10
                                                    <!----></label></th></tr></thead> <tbody><!----> <tr><td  class="f-sticky-col" nowrap="nowrap">text</td><td nowrap="nowrap">
                                                123456789
                                            </td><td nowrap="nowrap">
                                               text 1
                                            </td><td nowrap="nowrap">
                                                  text 2
                                            </td><td nowrap="nowrap">
                                                 text 3
                                            </td><td nowrap="nowrap">
                                                  text 4
                                            </td><td nowrap="nowrap">
                                                 text 5
                                            </td><td nowrap="nowrap">
                                                
                                            </td><td nowrap="nowrap">
                                                  text 6
                                            </td><td nowrap="nowrap">
                                                text 7
                                            </td><td nowrap="nowrap">
                                               8
                                            </td><td nowrap="nowrap">
                                               text 9
                                            </td><td nowrap="nowrap">
                                                10
                                            </td><td nowrap="nowrap">
                                                11
                                            </td><td nowrap="nowrap">
                                               12
                                            </td><td nowrap="nowrap">
                                                13
                                            </td></tr></tbody></table></div>

Answer 1

Вы можете добиться этого, немного изменив свой CSS.Используйте CSS ниже.Также удалите width = "100%" в теге таблицы, потому что ширина таблицы установлена ​​в css на 1600px.

<style>
.f-sticky-col {
position:absolute;
top:5px; /* specify a value otherwise it behaves like auto */
left:5px; /* specify a value */
}

.table-responsive {
overflow-x: scroll;
margin-left: 100px; /* The margin moves the cell over so not to overlap the absolute positioned column */
}

table { /* set the width of the table to the sum of the widths of the row */
1600px;
}

td, th { /* set the table cells and header cells width so they display evenly */
width: 100px;
}
</style>