HTML CSS examples for CSS Widget:Table Cell
Scrollable div in table cell
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body, td, div, p, a { font-family:Verdana, Arial; } html, body { height:100%; overflow:hidden; } table {<!-- www . j a va 2s . co m--> position:absolute; top:0px; left:0px; width:100%; height:100%; border-collapse:collapse; } table tr td.header { background-color:Chartreuse; color:yellow; padding:6px; text-align:center; } table tr td.content { text-align:center; vertical-align:middle; background-color:blue; color:pink; position:relative; } table tr td.rightScroll { width:201px; height:100%; border-left:2px solid OrangeRed; background-color:grey; display:table-cell; } table tr td.rightScroll div { width:201px; height:calc(100% - 29px); position:absolute; top:29px; right:0; overflow-y:scroll; } </style> </head> <body> <table> <tbody> <tr> <td class="header" colspan="2">Lorem </td> </tr> <tr> <td class="content">Lorem ipsum dolor sit<br>Lorem ipsum </td> <td class="rightScroll"> <div> Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem ipsum dolor <br>Lorem </div> </td> </tr> </tbody> </table> </body> </html>