CODEWITHSUNDEEP
css
Acubi
Acubi

Reputation: 2783

Why table column width is changed?

<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>

Below is the output of the above code, enter image description here

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>

Upvotes: 0

Views: 89

Answers (2)

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41935

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

Upvotes: 0

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

add css class to sensor column

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

.sensorName{
width:100px;
}

Upvotes: 2

Related Questions