-1

I have a jsfiddle here - https://jsfiddle.net/4eohzxwn/1/

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

        });
    });

I need the left static column to be fixed when the rest of the tabel scrolls.

I think Jquery/javascript is the only option.

Is it possible to keep the red static element in postion and scroll the rest of the table.

I also need to keep the rows height when it scrolls so it doesn't just go to one line

ttmt
  • 5,822
  • 27
  • 106
  • 158

4 Answers4

2

Try this Code

use translate instead of 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>
Amal
  • 3,398
  • 1
  • 12
  • 20
0

Have you looked at this question? HTML table with horizontal scrolling (first column fixed)

You're using jQuery in your snippet and in the answer there's a link to this plugin that seems to solve your issue, but you can probably achieve what you want with just CSS.

Community
  • 1
  • 1
glhrmv
  • 1,712
  • 1
  • 16
  • 23
0

You can do this using simple html and css,no need to write jquery for this.Please refer to my code below.

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>
Ritwika Das
  • 189
  • 5
0

$("#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>
Alfin Paul
  • 1,543
  • 14
  • 26