CODEWITHSUNDEEP
htmlcsshtml-table
fresh learner
fresh learner

Reputation: 467

Table cell width increases with addition of row

I have the following table:

<table border="1" class="mmrTable" id="mmrdisplayTable">
    <tbody><tr>
        <td valign="top" style="width: 160px; font-weight: bold;" id="mmrdisplayTD">Running Projects:</td>
        <td id="mmrdisplayTD">This month's running project</td>
    </tr>
    <tr>
        <td valign="top" style="width: 160px; font-weight: bold;" id="mmrdisplayTD">Main Orders:</td>
        <td id="mmrdisplayTD">This month's main orders</td>
    </tr>
    <tr>
        <td valign="top" style="width: 160px; font-weight: bold;" id="mmrdisplayTD">Main Opportunities:</td>
        <td id="mmrdisplayTD">This month's main opportunities</td>
    </tr>
    <tr>
        <td valign="top" style="width: 160px; font-weight: bold;" id="mmrdisplayTD">Comments/Summary:</td>
        <td id="mmrdisplayTD">no comments</td>
    </tr>
</tbody></table>

As soon as I add a row above all rows the width of the first column of all the other rows changes from 160 to something else. Can someone tell me why? and help me reduce it to 160?

enter image description here

The code for the row that I add is:

<td colspan="2" class="headDisplay">Month: May|
                        Year: 2014| Submitted by: ibrahim nadir|
                        Submission Date: 2014-05-22| Submitting department: IT
                    </td>

The CSS is:

#mmrdisplayTable {
                    width: 100%;
                }

.headDisplay{
                background: none repeat scroll 0 0 #3C68AE;
                border: 1px solid #DDDDDD;
                color: #FFFFFF;
                font-weight: bold;
                height: 20px;    
            padding: 2px 10px;
        }

 #mmrdisplayTD{
            border: 1px solid #ddd;
            text-align: left;
            padding:5px;
        }

Any suggestions and help would be really appreciated!

Upvotes: 0

Views: 76

Answers (1)

Sten Pelzer
Sten Pelzer

Reputation: 512

It's a pretty easy solution.

Just add this to your css.

#mmrdisplayTable {
    max-width: 320px;
}

#mmrdisplayTD {
    min-width: 160px;
}

so your css looks like this:

#mmrdisplayTable {
    width: 100%;
    max-width: 320px;
}
headDisplay {
    background: none repeat scroll 0 0 #3C68AE;
    border: 1px solid #DDDDDD;
    color: #FFFFFF;
    font-weight: bold;
    height: 20px;
    padding: 2px 10px;
}
#mmrdisplayTD {
    border: 1px solid #ddd;
    text-align: left;
    padding:5px;
    min-width: 160px;
}

max-width in #mmrdisplayTable is just 160px * the amount of td's.

See the Fiddle i made.

Upvotes: 1

Related Questions