HTML CSS examples for CSS Widget:Table Scroll
Table horizontal scroll
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> table {<!-- www. j a v a 2 s. co m--> width:3001px; margin:9px; border-collapse:collapse; overflow-x:auto; display:block; } tbody { border:2px solid Chartreuse; } td { min-width:100px; border:2px solid yellow; padding:9px; } th { background:blue; color:pink; border:2px solid OrangeRed; padding:9px; } </style> </head> <body> <table> <tbody> <tr> <th>L</th> <th>L</th> <th>L</th> <th>L</th> <th>L</th> <th>L</th> <th>L</th> <th>L</th> <th>L</th> <th>L</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> <th>Lo</th> </tr> <tr> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>Lorem ipsum dolor sit amet, consectetur adipis</td> <td>L</td> <td>L</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>L</td> <td>Lorem ipsum dolor sit amet, consectetur adipisc</td> <td>L</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> </tbody> </table> </body> </html>