html - Width of table cell with absolute content -
i need table wide it's needed when content absolute , wider whole page. when zoom , top schema div becoming wider, table expand cell. thanks.
.toptoolbar,.bottoolbar{ background-color: red; height:100%; } .lefttoolbar,.righttoolbar{ background-color: blue; width:100%; height:100%;; } .mdi{ position:relative; overflow:auto; width:100%; height:100%; background-color: grey; } .schema{ border:10px solid green; position:absolute; top:300px; left:300px; width:600px; height:300px; background-color:white; } .schemabot, .schematop{ border:10px solid green; top:0px; position:absolute; left:600px; width:600px; height:30px; background-color:white; } .schemaleft, .schemaright{ border:10px solid green; position:absolute; top:300px; left:0; width:30px; height:300px; background-color:white; } .tbl tr:first-child td,.tbl tr:last-child td{ position:relative; height:50px; } .tbl tr:nth-child(2) td:first-child,.tbl tr:nth-child(2) td:last-child{ position:relative; width:50px; height:100%; } .tbl tr:nth-child(2) td:nth-child(2){ } .tbl{ border-spacing:0px; min-width:100%; height:100%; } td{ padding:0px; } html, body{ height:100%; margin:0px; }
<!doctype html> <body> <table class="tbl"> <tr> <td colspan=3> <div class="toptoolbar"> <div class="schematop"></div> </div> </td> </tr> <tr> <td> <div class="lefttoolbar"> </div> </td> <td> <div class="mdi"> <div class="schema"></div> </div> </td> <td> <div class="righttoolbar"> </div> </td> </tr> <tr> <td colspan=3> <div class="bottoolbar"> <div class="schemabot"></div> </div> </td> </tr> </table> </body>
set schematop class width 100%.
.schemabot, .schematop{ border: 10px solid green; top: 0px; position: absolute; height: 30px; background-color: white; width: 100%; }
try one
.schemabot, .schematop{ border: 10px solid green; top: 0px; position: absolute; left: 36%; width: 36%; height: 30px; background-color: white; }
Comments
Post a Comment