Use -webkit-overflow-scrolling with a table that has a fixed first column

Question

I created several tables in our application that use the method in this jsfiddle to make the first column fixed and the rest of the table content scroll underneath it.

The problem I'm facing is I want to enable momentum scrolling for the x-overflow content, but once I add the -webkit-overflow-scrolling: touch; rule, it makes the whole table scrollable, resetting the fixed first column behavior back to the standard table behavior. According to the MDN page on -webkit-overflow-scrolling, it creates a new stacking context. I assume this is why it breaks the absolute positioned first column.

Is there any way around this? Its very awkward scrolling the table on mobile without momentum scrolling, as the scroll abruptly stops once my finger lifts off the screen.

Screenshot:

HTML:

<div class="fixed-table-container">
    <div class="fixed-table-body">
        <table id="table">

CSS:

.fixed-table-container {position: relative;}

.fixed-table-body {overflow-x: scroll; -webkit-overflow-scrolling: touch; height: 100%;}

#table > tbody > tr > td:first-child {
        position: absolute;
        display: inline-block;
        background-color: #fff;
        border-right: 2px solid #222;
        z-index: 9;
        left: 0;
        height: 44px;
        width: 26px;
        line-height: 46px;
    }

#table > tbody > tr > td:nth-child(2) {
        padding-left: 56px !important;
    }

DesignerUXTX DesignerUXTX · Accepted Answer · 2018-02-19T17:52:28

I'm having the same issue. The solution was to remove the fixed column for mobile. Apparently -webkit-overflow-scrolling breaks any child that has positions absolute or fixed.

Use -webkit-overflow-scrolling with a table that has a fixed first column

1 Answers