Click here to Skip to main content
14,487,217 members
Rate this:
Please Sign up or sign in to vote.
See more:
We are developing a HTML page like excel with HTML Table,user can merge some TDs in the rows or columns,in the merged TD, we insert some DIV for some purpose,this DIV's CSS uses the 'height: calc(100% + 6px)'.
Problem: when the size of chrome browser is changed,the the merged TD's height will change higher automatically.
we found that maybe it because the 'calc(100% + 6px)',but how to fix the TD's height? Thanks a lot!
some code like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

 <title></title>
 <style type="text/css">
  html, body, form
  {
   height: 100%;
   margin: 0;
   padding: 0;
  } 
#mainTable td>div{
	position: relative;
	left: -3px;
	top: 0px;
	width: -webkit-calc(100% + 6px);
	height: -webkit-calc(100% + 6px);
	width: calc(100% + 6px);
	height: calc(100% + 6px);
	border:1px solid blue;
	background-color: rgba(255, 255, 255, 0) !important;
	overflow: visible;
	/*overflow: hidden; */
}
#mainTable td>div>.borderControl{
	position: relative;
	left: 1px;
	top: 1px;
	width: -webkit-calc(100% - 2px);
	height: -webkit-calc(100% - 2px);
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	border:1px solid red;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}
#mainTable{
	box-sizing:border-box;
	border-collapse: collapse; 
	width: 500px; 
	height: 10px;
	table-layout: fixed;
	}
#mainTable td>div>.borderControl>div{
	position: relative;	
	height: 0;
	width: -webkit-calc(100% - 3px);
}

tr{
	height:24px;
	}
  td{
  	border: 1px solid Silver;
  	width:180px;
  	}
  	.borderContainer{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

  </style>

</head>

<body>
 <table id="mainTable"  >
<tr> 
  	<td >  </td> 
    <td >  </td>
    <td >  </td>
  </tr>
  <tr> 
  	<td >  </td>  
  	<td  rowspan="2" style="height:50px !important">
     <div ><div class="borderControl"><div></div><div class="widgetBox"></div></div><span></span><span></span><span></span><span></span></div>
   </td>
  	<td >  </td> 
  </tr>

  <tr>   	
  	<td >  </td> 
  	<td >  </td>
  </tr>

  <tr> 
  	<td >  </td> 
  	<td >  </td> 
  	<td >  </td> 
  </tr>
 </table>

</body>

</html>
Posted

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

I got it,just not use the calc function in the CSS '#mainTable td>div':
#mainTable td>div{
position: relative;
left:0px;
top:0px;
border:0;
width: 100% ;
height: 100%;
background-color: rgba(255, 255, 255, 0) !important;	
overflow: visible;
}
#mainTable td>div>.borderControl{
	position: relative;	
        left: -2px;	
        top: -2px ;	
        width: calc(100% + 4px);	
        height: calc(100% + 4px);	
	border:1px solid red;
	box-sizing: border-box;
        -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100