Windows phone internet explorer enlarge text in one td - html

Question

The problem is, that I have table for content with 3 td's, side td is 200px wide and the middle one width isn't defined, everything seems great on computer browsers (even internet explorer), but when it comes to testing on windows phone browser, in middle td text is much bigger, I'd would say twice as big as it should be and nothing seems to fix that, yes I tried writing font-size value to it in css, but that didn't seem to make any difference.
Sorry that I can't supply a screenshot from my windows phone because of broken power button, I'm using standard windows phone 8.1 internet explorer.
CSS of the table
#content_table {
width: 1024px;
border-spacing: 0;
margin-bottom: 30px;
border-collapse: collapse;
table-layout: fixed;
}
#content_table td:not(:last-child) {
padding: 0 15px 0 0;
}
#content_table #side_content {
width: 200px;
vertical-align:top;
}
#content_table #main_content {
width: 100%;
vertical-align:top;
font-size: 16px;
}
.side_content_title {
background: #c9cbce;
border-top: solid 2px #535f7c;
border-bottom: solid 2px #535f7c;
text-align:center;
width: 200px;
color: #353c4c;
padding: 2px 0;
}
.side_content {
background: rgba(243,243,243,1);
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
width: 190px;
padding: 5px;
border-bottom: solid 2px #535f7c;
color: #535f7c;
}
.main_content_title {
background: #c9cbce;
border-top: solid 2px #535f7c;
border-bottom: solid 2px #535f7c;
padding: 2px 0 2px 30px;
color: #353c4c;
}
.main_content {
background: rgba(243,243,243,1);
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
padding: 5px;
border-bottom: solid 2px #535f7c;
color: #535f7c;
}
HTML part
<table id="content_table">
<tbody>
<tr>
<td id="side_content">
<div class="side_content_title">title</div>
<div class="side_content"><br/><br/></div>
</td>
<td id="main_content">
<div class="main_content_title">title</div>
<div class="main_content">
Lorem ipsum<br/><br/>
</div>
</td>
<td id="side_content">
<div class="side_content_title">title</div>
<div class="side_content"><br/><br/></div>
</td>
</tr>
</tbody>
</table>

Answer 1

Thanks Mousey for helping, and pointing out to previously answered question. Setting view-port for device width could help if I wouldn't used few fixed position objects, but adding
-ms-text-size-adjust: none;
to body fixed text-size problem without messing up with anything else.

Answer 2

Use belo code in the body tag or to the main table
-ms-text-size-adjust: none;

Answer 3

Removing the line font-size: 16px; from this code should render will all <td> using the same font size
#content_table #main_content {
width: 100%;
vertical-align:top;
}
I think you are finding the phone automatically shrinks the font on smaller devices - except when it is manually specified in the code. 16px will look large on a mobile.
Setting the view-port may also help - see HTML CSS - Font size oversized when shown on windows phone for font-size issues on windows phone
Edit from the link above, using this fixed the problem as EDWcode stated.
-ms-text-size-adjust: none;