HTML CSS examples for CSS Widget:Div Table
Rotated Div at the end of HTML table
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!--from ww w .j a v a 2s.c o m--> font-family:'Open Sans', sans-serif; font-size:x-large; margin:0; color:Chartreuse; padding:2em 0.6em; font-weight:901; } .tableCont { } table { width:100%; margin-bottom:0.6em; font-size:2em; border-collapse:collapse; border-spacing:0; width:61%; } table td { border:2px solid yellow; text-align:center; line-height:100px; } table td.colFY { width:100px; background-color:blue; } table td.norm { background-color:pink; color:OrangeRed; } .side { background:grey; -ms-transform:rotate(91deg); -webkit-transform:rotate(91deg); transform:rotate(91deg); } </style> </head> <body> <div class="tableCont"> <table> <tbody> <tr> <td class="colFY">Lore</td> <td class="norm">Lorem ips</td> <td class="norm" data-title="HR Dashboard">Lorem ips</td> <td rowspan="3"> <div class="side"> Lorem ipsum </div> </td> </tr> <tr> <td class="colFY">Lore</td> <td class="norm">Lorem ips</td> <td class="norm">Lorem ips</td> </tr> <tr> <td class="colFY">Lore</td> <td class="norm">Lorem ips</td> <td class="norm">Lorem ips</td> </tr> </tbody> </table> </div> </body> </html>