Fixing table cells while scrolling

Question

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>

Anton Essential Anton Essential 685 3 15 · Answer 1 · 2016-09-27T13:27:05

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.

Answer 2 · 2016-09-27T12:44:10

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

Fixing table cells while scrolling

2 answers 2

More articles: