テーブルの列幅が変更される理由以下

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>&#60;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>&#60;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>&#60;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> 

画像から見た、「センサー名」の列は、一度次のCSSを追加両方tables.Butに対して等しい幅を持っているように、2つ以上のコードの出力、

ありますテーブルの幅は「センサ名」列の幅が異なります。私の質問は、次のCSSを追加した後、同じ幅の "Sensor Name"列を作成する方法です。

<style type="text/css"> 
    #reportContent{ 
     width: 714px; 
    } 
</style> 

Answer 1

列

<th rowspan="2" class="sensorName">Sensor Name</th> 
<td>sensor1</td><td class="sensorName"> 

---

.sensorName{ 
width:100px; 
} 

Answer 2

をセンサーにCSSクラスを追加し、この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