移动端用 `ul` 做为 `table` 的表头,如何实现 `ul` 跟随 `table` 左右移动?

Question

1. 现在table 可以左右拖动;
2. html 结构不能改变;
3. 现在用的是 translate3d 做移动操作,页面完全没有js;
4. 拖动 table 看不到任何 css 改变;
5. 页面是别人写的,我保存下来改的;

<div class="table-data">
    <div id="sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 30px;">
        <div class="table-title-wrap" style="z-index: 10; transform: translate3d(0px, 0px, 0px); width: 2000px; position: fixed; top: 38px;">
            <ul>
                <li>姓名</li>
                <li>姓名</li>
                <li>姓名</li>
                <li>姓名</li>
            </ul>
        </div>
    </div>
    <div class="table-body-wrap" style="width: 305px;">
        <div class="table-body">
            <table>
                <tbody>
                    <tr>
                        <td>
                           <div>小明</div>
                        </td>
                         <td>
                           <div>小明</div>
                        </td>
                         <td>
                           <div>小明</div>
                        </td>
                         <td>
                           <div>小明</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>