Question

我想要一个包含第一个（甚至有时是第二个）列的表（包括所有行，因此th和td）都要修复。该表的最后一列也应该是固定的。

中间的列应该（如果有太多列适合屏幕）可以水平滚动。我遇到了很大麻烦。

我不能让中心区域实际滚动，除非我设置固定或删除固定的最后一列，但我真的需要它。 HTML：

<div class="table-wrapper">
    <div class="container">
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Jan</th>
                <th>Feb</th>
                <th>Mar</th>
                <th>Apr</th>
                <th>May</th>
                <th>Jun</th>
                <th>Jul</th>
                <th>Aug</th>
                <th>Sep</th>
                <th>Oct</th>
                <th>Nov</th>
                <th>Dec</th>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Assets</td>
                <td>358 125</td>
                <td>716 250</td>
                <td>1 074 375</td>
                <td>358 125</td>
                <td>716 250</td>
                <td>1 074 375</td>
                <td>358 125</td>
                <td>716 250</td>
                <td>1 074 375</td>
                <td>358 125</td>
                <td>716 250</td>
                <td>1 074 375</td>
                <td>8 595 000</td>
            </tr>
            <tr>
                <td>Some type of assets</td>
                <td>179 535</td>
                <td>359 070</td>
                <td>538 605</td>
                <td>179 535</td>
                <td>359 070</td>
                <td>538 605</td>
                <td>179 535</td>
                <td>359 070</td>
                <td>538 605</td>
                <td>179 535</td>
                <td>359 070</td>
                <td>538 605</td>
                <td>4 308 840</td>
            </tr>
            <tr>
                <td>Some other type of assets</td>
                <td>134 780</td>
                <td>269 560</td>
                <td>404 340</td>
                <td>134 780</td>
                <td>269 560</td>
                <td>404 340</td>
                <td>134 780</td>
                <td>269 560</td>
                <td>404 340</td>
                <td>134 780</td>
                <td>269 560</td>
                <td>404 340</td>
                <td>3 234 720</td>
            </tr>
            <tr>
                <td>45456 Cars</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>1 078 680</td>
            </tr>
            <tr>
                <td>879878 computers</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>44 945</td>
                <td>89 890</td>
                <td>134 835</td>
                <td>1 078 680</td>
            </tr>
        </tbody>
    </table>
</div></div>

和css：

* {
    box-sizing: border-box;
}
.table-wrapper { 
    position:relative;   
    float: left;
    margin-right: 200px;
}

.container {
    overflow-x:scroll;
    overflow-y:visible;
    margin-left: 200px;
}

td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child, td:first-child {
    position: absolute;
    left: 5px;
        width: 200px;
}
th:last-child, td:last-child {
    position: absolute;
    right: -200px;
        width: 200px;
}

JsFiddle can be found here

更新：进一步解释我的需求。中间部分不能设置为固定。我想尽可能多地使用页面空间。这意味着如果大屏幕上只有几列，则无需滚动。

Answer 1

http://jsfiddle.net/Usk3h/1/

使用滚动码在前后和中间部分使用3个部分2个固定部件。

.table-wrapper { 
    overflow-x:scroll;
    width:600px;
    float:left;
    display:inline-block;
}

table.header { float:left; width:300px; }
table.body { width:1600px; }
td, th {
    padding: 5px 20px;
}

完整的解决方案

<强> http://jsfiddle.net/Usk3h/3/

表格的前两列已固定，也有最后一列并在其间滚动

1 个答案: