Question

我在这里使用了下面的另一个答案，在这里有一个表，但我想知道是否可以修改它，以便我也可以修复水平滚动的第一列。

所以目前我正在使用它作为模板：

HTML

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

CSS

html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}

jquery的

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});

http://jsfiddle.net/mathijsflietstra/X2Kmd/1/

但是我想修复左列，所以当我向左滚动时它不会离开屏幕。我已经尝试将它的位置固定并且绝对但是然后将所有这些都从列中暴露出来并且它在屏幕上运行并从垂直滚动中移出。

Answer 1

我试过寻找一个只有CSS的解决方案，但是我无法找到一个具有良好兼容性的解决方案......我创建了一个jQuery解决方案：

http://jsfiddle.net/m9v1326t/

基本上，第一列的left CSS属性是根据滚动位置进行操作的。

var $stickyHeader = $('table thead tr th:first-child');
var $stickyCells = $('table tbody tr td:first-child');

$('table').on('scroll', function () {
  $stickyHeader.css('left', ($(this).scrollLeft()+'px'));
  $stickyCells.css('left', ($(this).scrollLeft()+'px'));
});

我还添加了一些额外的样式来完成这项工作，重要的是：

table thead tr th:first-child,
table tbody tr td:first-child{
  position:relative;
  ...

position:relative需要被操纵的left属性按预期工作。

您可能需要添加更多样式来粘贴粘性列（虚线边框在滚动时显示底层单元格），但这样可以让您走上正确的轨道。

如果您正在寻找它，请告诉我。

固定表头，左列用x和y滚动

2 个答案: