Javascript - 滚动时修复表格侧边栏

Question

我在这里有一个 jsfiddle - https://jsfiddle.net/4eohzxwn/1/

    $("div").scroll(function(){
        $('.static').css({
        "position": "absolute", "top": 0

        });
    });

当表格的其余部分滚动时，我需要修复左侧的静态列。

我认为 Jquery/javascript 是唯一的选择。

是否可以将红色静态元素保持在原位并滚动表格的其余部分。

我还需要在滚动时保持行高，这样它就不会只到一行

Answer 1

试试这个代码

使用translate 而不是position

$("#wrap").scroll(function(){
  var translate = "translate("+this.scrollLeft + "px,0)";
  $('.static').css('transform',translate);
});

table{
  width: 600px;
}

.static{
  border: 1px solid red;
  width: 100px;
  word-wrap: break-word;
  background-color:#fff;
}

.scroll{
  border: 1px solid green;
  width: 500px;
}

#wrap{
  border: 1px solid blue;
  width: 400px;
  overflow: scroll;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <table>
    <tbody>
      <tr>
        <td class="static">Staticdfxcvzx
        cvzxcvzxcv</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

你看过这个问题吗？ HTML table with horizontal scrolling (first column fixed)

您在 sn-p 中使用 jQuery，而答案中有一个指向 this plugin 的链接似乎可以解决您的问题，但您可能只使用 CSS 就可以实现您想要的。

Answer 3

您可以使用简单的 html 和 css 来完成此操作，无需为此编写 jquery。请参考下面的代码。

table{
  width: 600px;
}

.static{
  border: 1px solid red;
  width: 100px;
  word-wrap: break-word;
   position:absolute;
            width:5em;
            left:0;
            top:auto;
}

.scroll{
  border: 1px solid green;
  width: 500px;
}

#outerdiv {
            position: absolute;
            top: 0;
            left: 0;
            right: 5em;
        }
        #innerdiv {
            width: 100%;
            overflow-x:scroll;
            margin-left: 5em;
            overflow-y:visible;
            padding-bottom:1px;
        }
        .headcol {
            position:absolute;
            width:5em;
            left:0;
            top:auto;
            border-right: 0px none black;
            border-top-width:3px;
            /*only relevant for first row*/
            margin-top:-3px;
            /*compensate for top border*/
        }

<div id="outerdiv">
    <div id="innerdiv">
  <table>
    <tbody>
      <tr>
        <td class="static">Staticdfxc</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Answer 4

$("#wrap").scroll(function(){
  var translate = "translate("+this.scrollLeft + "px,0)";
  $('.static').css('transform',translate);
});

table{
  width: 600px;
}

.static{
  border: 1px solid red;
  width: 100px;
  word-wrap: break-word;
}

.scroll{
  border: 1px solid green;
  width: 500px;
}

#wrap{
  border: 1px solid blue;
  width: 400px;
  overflow: scroll;
  position: relative;
}
.static
{
background-color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <table>
    <tbody>
      <tr>
        <td class="static">Staticdfxcvzx
        cvzxcvzxcv</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
    </tbody>
  </table>
</div>