Why table column width is changed? - css

Question

<div id="reportContent">
<table id='insideTable5' border='1'>
<tr>
<th rowspan="2">Sensor Name</th>
<th rowspan="2">Senosr No</th>
<th colspan="9">Temperature</th>
<th colspan="9">Humidity</th>
</tr>
<tr>
<td>Min</td>
<td>Max</td>
<td>Mean</td>
<td>Spread</td>
<td>Count</td>
<td>LowRange</td>
<td><Low</td>
<td>HighRange</td>
<td> High</td>
<td>Min</td>
<td>Max</td>
<td>Mean</td>
<td>Spread</td>
<td>Count</td>
<td>LowRange</td>
<td><Low</td>
<td>HighRange</td>
<td> High</td>
</tr>
<script type="text/javascript">
var i=0;
for (i=0;i<=4;i++)
{
document.write('<tr class="even"><td>sensor1</td><td>0410-00370</td><td>19.5</td><td>24.0</td><td>21.6</td><td>4.5</td><td>48</td><td>Not Set</td><td>0</td><td>Not Set</td><td>0</td><td>19.5</td><td>24.0</td><td>21.6</td><td>4.5</td><td>48</td><td>Not Set</td><td>0</td><td>Not Set</td><td>0</td></tr>');
}
</script>
</table>
<br/>
<br/>
<table id='insideTable5' border='1'>
<tr>
<th rowspan="2">Sensor Name</th>
<th rowspan="2">Senosr No</th>
<th colspan="9">Temperature</th>
</tr>
<tr>
<td>Min</td>
<td>Max</td>
<td>Mean</td>
<td>Spread</td>
<td>Count</td>
<td>LowRange</td>
<td><Low</td>
<td>HighRange</td>
<td> High</td>
</tr>
<script type="text/javascript">
var i=0;
for (i=0;i<=3;i++)
{
document.write('<tr class="even"><td>sensor1</td><td>0410-00370</td><td>19.5</td><td>24.0</td><td>21.6</td><td>4.5</td><td>48</td><td>Not Set</td><td>0</td><td>Not Set</td><td>0</td></tr>');
}
</script>
</table>
</div>
Below is the output of the above code,
As seen from the image, the columns of "Sensor Name" have got the equal width for both tables.But once adding the following css, two tables have the different width for the "Sensor Name" column. My question is how to make "Sensor Name" columns having the same width after adding the following css.
<style type="text/css">
#reportContent{
width: 714px;
}
</style>

Answer 1

add css class to sensor column
<th rowspan="2" class="sensorName">Sensor Name</th>
<td>sensor1</td><td class="sensorName">
.sensorName{
width:100px;
}

Answer 2

Add this css:
table th:nth-child(1), table th:nth-child(2),
table td:nth-child(1), table td:nth-child(2)
{
white-space:nowrap;
}
jsFiddle example