Using the sentences of this fiddle, I made a scroll table with fixed headers:
<!DOCTYPE html> <html lang='en' dir='ltr'> <head> <meta charset='UTF-8' /> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <style> body { font-family: sans-serif; font-size: 20px; } section { position: relative; border: 1px solid #000; padding-top: 2em; background: #808; } #container { overflow-y: auto; height: 200px; padding-top: 1em; } table { border-spacing: 0; border-collapse: collapse; width: 100%; } th { height: 10px; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; background: #0f0; border: 2px solid #f0f; white-space: nowrap; } th > div { position: absolute; background: #ff0; color: #00f; padding: 1em; top: 0; margin-left: auto; line-height: normal; border: 3px solid #805; opacity: 0.5; } td { border-bottom: 3px solid #666; background: #fdd; color: #c0c; padding: 1em; } td:first-child { border-right: 1px solid #aaa; font-family: serif; text-align: center; } td:last-child { border-left: 1px solid #aaa; } </style> <title>test</title> </head> <body> <div> <section> <div id='container'> <table> <thead> <tr class='header'> <th> head 100 <div id='h1'>head 1</div> </th> <th> head 2 <div id='h2'>head 2</div> </th> <th> head last <div id='hL'>head last</div> </th> </tr> </thead> <tbody> <tr> <td>Aardvark</td> <td>beta<br />longer text<br />spanning on some lines</td> <td>omega</td> </tr> <tr> <td>alfa</td> <td>beta<br />long text</td> <td>omega and something else</td> </tr> <tr> <td>alfa</td> <td>beta</td> <td>omega</td> </tr> <tr> <td>alfa</td> <td>beta</td> <td>omega</td> </tr> <tr> <td>alfa</td> <td>beta</td> <td>omega</td> </tr> <tr> <td>alfa</td> <td>beta</td> <td>omega</td> </tr> <tr> <td>alfa</td> <td>beta</td> <td>omega</td> </tr> <tr> <td>alfa</td> <td>beta</td> <td>omega</td> </tr> <tr> <td>alfa</td> <td>beta</td> <td>omega just to finish</td> </tr> </tbody> </table> </div> </section> </div> </body> </html>
Scrolling works smoothly, as you can check https://jsfiddle.net/Marco_Bernardini/h8ukwf3w/4/ , but it has an aesthetic problem: the column heading is not centered.
The TH height will be set to 0 , and its borders will be removed: it now has an ugly color to see during the debug phase.
I checked a lot of solutions, and some of them are commented out in the script:
- with
width: -moz-available; each heading starts in the correct position, but they all end on the right side of the table; I added opacity: 0.5; so that it is clearly visible. - with
width: 100%; DIV takes the width of the whole table, not the parent TH - with
width: inherit; nothing happens ( DIV inside TH doesn't inherit TH width) - trick
margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; does not give a result
Even using two nested DIV inside TH not a solution, since at least the outer one should fill TH , which is not so.
The number of columns is not determined a priori, since the table will receive data from the database, and it is up to users to decide which columns will be displayed. It also prevents me from using a fixed width.
How can I center this DIV inside the width TH ?
source share