| <!DOCTYPE html> |
| <style> |
| table { border-spacing: 0; } |
| thead, tfoot { break-inside: avoid; } |
| td { height: 18px; padding: 0; font-size: 14px; } |
| div { overflow: -webkit-paged-y; width: 100px; height: 200px; column-gap: 0 } |
| div::-webkit-scrollbar { display: none; } |
| </style> |
| <div> |
| <table> |
| <thead><td>HEAD</td></thead> |
| <tr><td>1</td></tr> |
| <tr><td>2</td></tr> |
| <tr><td>3</td></tr> |
| <tr><td>4</td></tr> |
| <tr><td>5</td></tr> |
| <tr><td>6</td></tr> |
| <tr><td>7</td></tr> |
| <tr><td>8</td></tr> |
| <tr><td>9</td></tr> |
| <tr><td>10</td></tr> |
| <tr><td>11</td></tr> |
| <tr><td>12</td></tr> |
| <tr><td>13</td></tr> |
| <tr><td>14</td></tr> |
| <tfoot><td>FOOT</td></tfoot> |
| </table> |
| </div> |
| <div id="scrolled"> |
| <table> |
| <thead><td>HEAD</td></thead> |
| <tr><td>1</td></tr> |
| <tr><td>2</td></tr> |
| <tr><td>3</td></tr> |
| <tr><td>4</td></tr> |
| <tr><td>5</td></tr> |
| <tr><td>6</td></tr> |
| <tr><td>7</td></tr> |
| <tr><td>8</td></tr> |
| <tr><td>9</td></tr> |
| <tr><td>10</td></tr> |
| <tr><td>11</td></tr> |
| <tr><td>12</td></tr> |
| <tr><td>13</td></tr> |
| <tr><td>14</td></tr> |
| <tfoot><td>FOOT</td></tfoot> |
| </table> |
| </div> |
| <script> |
| scrolled.scrollTop = 200; |
| </script> |
