Last active
January 14, 2022 22:12
-
-
Save fedeghe/f7ed2d414e125719c4b95d22baee01bb to your computer and use it in GitHub Desktop.
full scrollable table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title></title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| html { | |
| overflow-y: scroll; | |
| } | |
| body { | |
| font-family: verdana | |
| } | |
| .TableExt { | |
| width: 400px; | |
| display: block; | |
| overflow: hidden; | |
| border: 1px solid black; | |
| border-spacing: initial; | |
| } | |
| .mainContent { | |
| overflow: scroll; | |
| border-spacing: initial; | |
| padding: 0 | |
| } | |
| .mainContent table { | |
| border-spacing: initial; | |
| } | |
| .mainContent th, | |
| .mainContent td { | |
| min-width: 80px; | |
| } | |
| .mainContent th { | |
| height: 30px | |
| } | |
| /* .mainContent tr { | |
| max-height: 40px | |
| } */ | |
| .mainContent td { | |
| height: 60px; | |
| overflow: scroll; | |
| vertical-align: baseline; | |
| } | |
| td .cnt { | |
| max-height: 60px | |
| } | |
| .CapTop { | |
| caption-side: top; | |
| text-align: center; | |
| width: 100%; | |
| display: block; | |
| background-color: #ddd; | |
| } | |
| .CapBottom { | |
| caption-side: bottom; | |
| text-align: center; | |
| width: 100%; | |
| display: block; | |
| background-color: #ddd; | |
| } | |
| tr th { | |
| text-align: left; | |
| } | |
| .mainBody { | |
| width: 400px; | |
| display: block; | |
| overflow: scroll; | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| } | |
| .mainBody tr { | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| } | |
| .innerBody { | |
| overflow: scroll; | |
| display: block; | |
| height: 150px | |
| } | |
| thead, | |
| tfoot { | |
| display: block; | |
| background-color: #eee; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>⇆ ⇵ scrollable table</li> | |
| <li>⇵ scrollable cell</li> | |
| <li>⇆ auto scrollable header & footer</li> | |
| <li>fixed header & footer</li> | |
| <li>header & footer caption</li> | |
| </ul> | |
| <table class="TableExt"> | |
| <caption class="CapTop">top caption</caption> | |
| <tbody class="mainBody"> | |
| <tr> | |
| <td class="mainContent"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>One</th> | |
| <th>Two</th> | |
| <th>Three</th> | |
| <th>Four</th> | |
| <th>Five</th> | |
| <th>Six</th> | |
| </tr> | |
| </thead> | |
| <tbody class="innerBody"> | |
| <tr> | |
| <td> | |
| <div class="cnt">One long scrollable data1 herg th et dty t</div> | |
| </td> | |
| <td>Two data1</td> | |
| <td>Three data1</td> | |
| <td>Four data1</td> | |
| <td>Five data1</td> | |
| <td>Six data1</td> | |
| </tr> | |
| <tr> | |
| <td>One data2</td> | |
| <td>Two data2</td> | |
| <td>Three data2</td> | |
| <td>Four data2</td> | |
| <td>Five data2</td> | |
| <td>Six data2</td> | |
| </tr> | |
| <tr> | |
| <td>One data3</td> | |
| <td>Two data3</td> | |
| <td>Three data3</td> | |
| <td>Four data3</td> | |
| <td>Five data3</td> | |
| <td>Six data3</td> | |
| </tr> | |
| <tr> | |
| <td>One data4</td> | |
| <td>Two data4</td> | |
| <td>Three data4</td> | |
| <td>Four data4</td> | |
| <td>Five data4</td> | |
| <td>Six data4</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <th>One</th> | |
| <th>Two</th> | |
| <th>Three</th> | |
| <th>Four</th> | |
| <th>Five</th> | |
| <th>Six</th> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </td> | |
| </tr> | |
| </tbody> | |
| <caption class="CapBottom">bottom caption</caption> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment