如何使用CSS将水平滚动添加到表格而不是具有固定标题的页面？

Question

我想将滚动条添加到表格而不是页面，现在滚动条正在使用固定标题的正文或页面。如何将滚动条设置为

table

而不是

tbody

或

page

。当我将卷轴交给

tbody

时。 是否可以将滚动条提供给具有固定标题的表格。 在下面的示例中，我在

page

中有滚动，或者我可以在 tbody 中添加。如何使用 css 为具有固定标题的表格添加滚动条。Jsfiddle 任何人都可以帮助我。它不是向表添加滚动条的重复。因为如果我在表中有更多列。本示例中未显示溢出的列

Answer 1

<div class="table-outer-wrapper">
<div class="scrolling-lock-table-wrapper">
 <table class="tbl-search-results tbl-mobile-headers" id="tbl_mobile_headers_0">
    <thead>
        <tr>
            <th><a href="#" class="sortable">Error(s)</a></th>
            <th><a href="#" class="sortable">Last</a></th>
            <th><a href="#" class="sortable">First</a></th>
            <th><a href="#" class="sortable">Student #</a></th>
            <th><a href="#" class="sortable sorted-asc">Year</a></th>
            <th><a href="#" class="sortable">DOB</a></th>
            <th><a href="#" class="sortable">PRM</a></th>
            <th><a href="#" class="sortable">SRM</a></th>
            <th><a href="#" class="sortable">ORM</a></th>
            <th><a href="#" class="sortable">Grd</a></th>
            <th><a href="#" class="sortable">Func</a></th>
            <th><a href="#" class="sortable">Lang</a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>red</td>
            <td>Swordfish</td>
            <td>Marlin</td>
            <td>123456</td>
            <td>2017</td>
            <td>08/08/2005</td>
            <td>V</td>
            <td>A</td>
            <td>NA</td>
            <td>06</td>
            <td>MDB</td>
            <td>EN</td>
        </tr>
        <tr>
            <td>yellow</td>
            <td>Swordfish</td>
            <td>Marlin</td>
            <td>123456</td>
            <td>2017</td>
            <td>08/08/2005</td>
            <td>V</td>
            <td>A</td>
            <td>NA</td>
            <td>06</td>
            <td>MDB</td>
            <td>EN</td>
        </tr>
        <tr>
            <td>--</td>
            <td>Swordfish</td>
            <td>Marlin</td>
            <td>123456</td>
            <td>2017</td>
            <td>08/08/2005</td>
            <td>V</td>
            <td>A</td>
            <td>NA</td>
            <td>06</td>
            <td>MDB</td>
            <td>EN</td>
        </tr>
    </tbody>
</table>
</div>
</div>

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.table-outer-wrapper {
    border:1px solid #ccc;
    max-width:700px;
}

.scrolling-lock-table-wrapper {
    overflow-x:scroll;
    overflow-y:visible;
    width:100%;
    padding-left: 280px;
}
td, th {
    padding: 5px 20px;
    text-align:left;
    white-space: nowrap;
}
th:nth-of-type(1), td:nth-of-type(1) {
    position: absolute;
    left: 0;
    width: 80px;
    background-color: #eee;
}

th:nth-of-type(2), td:nth-of-type(2) {
    position: absolute;
    left: 80px;
    width: 100px;
    background-color: #eee;
}

th:nth-of-type(3), td:nth-of-type(3) {
    position: absolute;
    left: 180px;
    width: 100px;
    background-color: #eee;
}


// .fix {
//     position: fixed;
//     left: 280px;
//     width:160px;
// }
// .fix_th {
//     position: fixed;
//     left: 220px;
//     width:160px;
// }
// .afterfix {
//     position:relative;
//     padding: 0 50px;
// }