CSS3 calc() works only sometimes

Question

I've got this html page that uses CSS3 calc() a few times. They all work except the last two. This works:

<table style="width:100%;height:calc(50% - 25px);" cellpadding="0px" cellspacing="0px">

But this doesn't work:

<td style="width:calc(75% - 60px);height:100%;" bgcolor="#FF0000">

But if I remove the " - 60px" from it then it works.

Here is my full code:

<style>
body{margin:0px;}
.button1{background-image:linear-gradient(#F6F8F9 0%,#E5EBEE 49%,#D7DEE3 51%,#F5F7F9 100%);border-style:none;}
.button2{background-image:linear-gradient(#AEBCBF 0%,#6E7774 49%,#0A0E0A 51%,#0A0809 100%);border-style:none;}
.input1-white{background-image:linear-gradient(#F6F8F9 0%,#E5EBEE 49%,#D7DEE3 51%,#F5F7F9 100%);border-style:none;border-top-left-radius:10px;border-bottom-left-radius:10px;box-shadow:0px 0px 10px 0px #BFBFBF inset;padding-left:10px;outline:none;}
.input1-white:hover{box-shadow:0px 0px 10px 0px #00BFFF inset;}
.input1-black{background-image:linear-gradient(#AEBCBF 0%,#6E7774 49%,#0A0E0A 51%,#0A0809 100%);border-style:none;border-top-left-radius:10px;border-bottom-left-radius:10px;box-shadow:0px 0px 10px 0px #3F3F3F inset;padding-left:10px;outline:none;}
.input1-black:hover{box-shadow:0px 0px 10px 0px #FFBF00 inset;}
.button1-white{background-image:linear-gradient(#F6F8F9 0%,#E5EBEE 49%,#D7DEE3 51%,#F5F7F9 100%);border-style:none;box-shadow:0px 0px 10px 0px #BFBFBF inset;outline:none;}
.button1-white:hover{box-shadow:0px 0px 10px 0px #00BFFF inset;}
.button1-black{background-image:linear-gradient(#AEBCBF 0%,#6E7774 49%,#0A0E0A 51%,#0A0809 100%);border-style:none;box-shadow:0px 0px 10px 0px #3F3F3F inset;outline:none;}
.button1-black:hover{box-shadow:0px 0px 10px 0px #FFBF00 inset;}
.button2-white{background-image:linear-gradient(#F6F8F9 0%,#E5EBEE 49%,#D7DEE3 51%,#F5F7F9 100%);border-style:none;border-top-right-radius:10px;border-bottom-right-radius:10px;box-shadow:0px 0px 10px 0px #BFBFBF inset;outline:none;}
.button2-white:hover{box-shadow:0px 0px 10px 0px #00BFFF inset;}
.button2-black{background-image:linear-gradient(#AEBCBF 0%,#6E7774 49%,#0A0E0A 51%,#0A0809 100%);border-style:none;border-top-right-radius:10px;border-bottom-right-radius:10px;box-shadow:0px 0px 10px 0px #3F3F3F inset;outline:none;}
.button2-black:hover{box-shadow:0px 0px 10px 0px #FFBF00 inset;}
</style>
<table style="width:100%;height:10px;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:90%;height:100%;transition-duration:1s;" id="td1">
<input class="button1" style="width:100%;height:100%;" type="button" onclick="if(td1.style.width=='90%'){td1.style.width='10%';td2.style.width='90%';input1.className='input1-black';button1.className='button1-black';button2.className='button2-black';}else{td1.style.width='90%';td2.style.width='10%';input1.className='input1-white';button1.className='button1-white';button2.className='button2-white';}"/>
</td>
<td style="width:10%;height:100%;transition-duration:1s;" id="td2">
<input class="button2" style="width:100%;height:100%;" type="button" onclick="if(td1.style.width=='90%'){td1.style.width='10%';td2.style.width='90%';input1.className='input1-black';button1.className='button1-black';button2.className='button2-black';}else{td1.style.width='90%';td2.style.width='10%';input1.className='input1-white';button1.className='button1-white';button2.className='button2-white';}"/>
</td>
</tr>
</table>
<table style="width:100%;height:calc(50% - 25px);" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:100%;height:100%;">
</td>
</tr>
</table>
<table style="width:100%;height:30px;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:25%;height:100%;">
</td>
<td style="width:calc(50% - 60px);height:100%;">
<input class="input1-white" id="input1" style="width:100%;height:100%;" type="text"/>
</td>
<td style="width:30px;height:100%;">
<input class="button1-white" id="button1" style="width:100%;height:100%;" type="button"/>
</td>
<td style="width:30px;height:100%;">
<input class="button2-white" id="button2" style="width:100%;height:100%;" type="button"/>
</td>
<td style="width:25%;height:100%;">
</td>
</tr>
</table>
<table style="width:100%;height:100px;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:calc(75% - 60px);height:100%;" bgcolor="#FF0000">
<!-- DOESN'T WORK !-->
x
</td>
<td style="width:100px;height:100%;" bgcolor="#00FF00">
y
</td>
<td style="width:calc(25% - 40px);height:100%;" bgcolor="#0000FF">
<!-- DOESN'T WORK, I THINK !-->
z
</td>
</tr>
</table>