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>

以下是上述代码的输出， enter image description here

从图像中可以看出，“传感器名称”列的两个表的宽度相等。但是，一旦添加了以下css，两个表的“传感器名称”列的宽度就不同了。我的问题是如何在添加以下css后使“Sensor Name”列具有相同的宽度。

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

Answer 1

将css类添加到传感器列

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

.sensorName{
width:100px;
}

Answer 2

添加此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

为什么表列宽度已更改？

2 个答案: