There are several tables. It is required that the two td columns (in which the text "Title 2" is stored) are recorded during horizontal scrolling.

 .table { width: 100%; border-collapse: collapse; border-spacing: 0; border: 1px solid #d9dde3; margin-bottom: 20px; } th { background: #e4e6eb; border: 1px solid #d9dde3; padding: 8px 15px; text-align: center; font-size: 13px; } .table tr:nth-child(odd) td { background: #f6f7f8; } td { background: #fff; border: 1px solid #d9dde3; padding: 15px; font-size: 14px; } 
 <div>Π’Π°Π±Π»ΠΈΡ†Π° 1</div> <table class="table"> <thead> <tr> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> </tr> </thead> <tbody> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> </tbody> </table> <div>Π’Π°Π±Π»ΠΈΡ†Π° 2</div> <table class="table"> <thead> <tr> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> </tr> </thead> <tbody> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> </tbody> </table> <div>Π’Π°Π±Π»ΠΈΡ†Π° 3</div> <table class="table"> <thead> <tr> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> </tr> </thead> <tbody> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> <tr> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b> </td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> </tbody> </table> 

    2 answers 2

    Use the plugin, http://manos.malihu.gr/jquery-custom-content-scroller/ The site has documentation describing the methods, you can solve your problems with it. Support horizontal scrolling and fixing what you wrote above: mouseWheel: {preventDefault: true}
    Scrolling is reached (same bahavior with browser's native scrollbar). It is not difficult, I think quickly figure it out.

      You can try this:

       .table{ width: 100%; border-collapse: collapse; border-spacing: 0; border: 1px solid #d9dde3; margin-bottom: 20px; } th{ background: #e4e6eb; border: 1px solid #d9dde3; padding: 8px 15px; text-align: center; font-size: 13px; } .table tr:nth-child(odd) td { background: #f6f7f8; } td{ background: #fff; border: 1px solid #d9dde3; padding: 15px; font-size: 14px; height:50px; } #x{ position: fixed; background:#fff; } #z{ margin-left:220px; } 
       <div style="display:relative"> <div id="x" > <table> <thead> <tr> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> </tr> </thead> <tbody> <tr> <td ><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b></td> <td ><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b></td> </tr> <tr> <td ><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b></td> <td ><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b></td> </tr> <tr> <td ><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b></td> <td ><b>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</b></td> </tr> </tbody> </table> </div> <div id="z" > <table> <thead> <tr> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> <th>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</th> </tr> </thead> <tbody> <tr> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> <tr> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> <tr> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> <td>ВСкст ячСйки</td> </tr> </tbody> </table> </div> </div> 

      • Well, there are 2 scrolls, this is not an option, since the page itself wakes up horizontally, namely, when scrolling the page, there should be a fixation. JS is needed here, only I don’t understand how to write it correctly. There is also a nuance that the table in height can not get into the screen and you need to scroll, taking into account the fixation - Karalahti
      • one
        @Karalahti then: jsfiddle.net/CRafT/jpqn9rp4/1 - C.Raf.T