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

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;
}

j查询

$('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 属性按预期工作所必需的。

您可能需要添加更多样式来整理粘性列(虚线边框在滚动时显示底层单元格)但这应该让您走上正确的轨道。

如果这是您要找的，请告诉我。