HTML CSS examples for CSS Widget:Div Table
Div overlay over several table columns
<html> <head> <title>Lorem ipsum dolor</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> tr {<!-- www .jav a 2 s .co m--> height:26px; } .event-container { position:relative; } .event { position:absolute; } .event { top:0px; left:0px; z-index:1001; } .event { height:100%; opacity:0.26 } .row-container { position:relative; border:2px solid Chartreuse; } .row-overlay { position:absolute; top:0; left:0; background:black; opacity:0.51; width:100%; height:100%; } .row-table { width:100%; border-collapse:collapse; } </style> </head> <body> <table style="width:200px;background:#eee;"> <tbody> <tr> <td>L</td> <td colspan="2"> <div class="row-container"> <table class="row-table"> <tbody> <tr> <td style="background: green;"></td> <td style="background: orange;"></td> </tr> </tbody> </table> </div> </td> </tr> <tr> <td>L</td> <td class="event-container">Lor <div class="event" style="background:red; width: 100%;"> Lorem ips </div> </td> <td>L</td> </tr> <tr> <td>L</td> <td class="event-container">Lor <div class="event" style="background:blue; width: 150px;"> Lorem ips </div> </td> <td>L</td> </tr> <tr> <td>L</td> <td colspan="2"> <div class="row-container"> <table class="row-table"> <tbody> <tr> <td style="background: green;"></td> <td style="background: orange;"></td> </tr> </tbody> </table> <div class="row-overlay"></div> </div> </td> </tr> </tbody> </table> </body> </html>