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

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -