| <!DOCTYPE html> |
| <style> |
| table { border-spacing: 0; } |
| thead, tfoot { break-inside: avoid; } |
| td { width: 50px; height: 18px; padding: 0; background: green; } |
| thead td { background: blue } |
| tfoot td { background: yellow } |
| div { overflow: -webkit-paged-x; width: 100px; height: 200px; column-gap: 0 } |
| div::-webkit-scrollbar { display: none; } |
| </style> |
| <div> |
| <table> |
| <thead><td></td></thead> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tfoot><td></td></tfoot> |
| </table> |
| </div> |
| <div id="scrolled"> |
| <table> |
| <thead><td></td></thead> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tr><td></td></tr> |
| <tfoot><td></td></tfoot> |
| </table> |
| </div> |
| <script> |
| scrolled.scrollLeft = 100; |
| </script> |