Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> table { border-collapse: separate; border-spacing: 0; border-top: 1px solid #000; } td, th { margin: 0; border: 1px solid #000; white-space: nowrap; border-top-width: 0px; } div { width: 450px; overflow-x: scroll; margin-left: 5em; overflow-y: visible; padding: 0; } .headcol { position: absolute; width: 5em; left: 0; top: auto; border-top-width: 2px; margin-top: -1px; } .headcol:before { content: 'Row '; } .long { background: #8cdba3; letter-spacing: 1em; } </style> </head> <body> <div> <table> <tr> <th class="headcol">1</th> <td class="long">LOREM IPSUM LOREM IPSUM</td> <td class="long">LOREM IPSUM LOREM IPSUM</td> </tr> <tr> <th class="headcol">2</th> <td class="long">LOREM IPSUM LOREM IPSUM</td> <td class="long">LOREM IPSUM LOREM IPSUM</td> </tr> <tr> <th class="headcol">3</th> <td class="long">LOREM IPSUM LOREM IPSUM</td> <td class="long">LOREM IPSUM LOREM IPSUM</td> </tr> <tr> <th class="headcol">4</th> <td class="long">LOREM IPSUM LOREM IPSUM</td> <td class="long">LOREM IPSUM LOREM IPSUM</td> </tr> <tr> <th class="headcol">5</th> <td class="long">LOREM IPSUM LOREM IPSUM</td> <td class="long">LOREM IPSUM LOREM IPSUM</td> </tr> <tr> <th class="headcol">6</th> <td class="long">LOREM IPSUM LOREM IPSUM</td> <td class="long">LOREM IPSUM LOREM IPSUM</td> </tr> </table> </div> </body> </html>