In below code, it overlaps initial two columns. If remove absolute then it looks correct but, unable to freeze the column. How this can be corrected to freeze first column.

    .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>

1 Answers

0
Steve Lage On

You can achieve this by changing your css a little. Use the css below. Also remove the width="100%" in the table tag because the table width is set in the css to 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>