表格单元格宽度随着行的增加而增加

Question

我有下表：

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

只要在所有行上方添加一行，所有其他行的第一列的宽度就会从160更改为其他行。有人可以告诉我为什么吗？并帮我把它减少到160？

我添加的行的代码是：

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

CSS是：

#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;
        }

任何建议和帮助都会非常感激！

Answer 1

这是一个非常简单的解决方案。

只需将此添加到您的CSS中即可。

#mmrdisplayTable {
    max-width: 320px;
}

#mmrdisplayTD {
    min-width: 160px;
}

所以你的css看起来像这样：

#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;
}

#mmrdisplayTable中的max-width只是160px * td的数量。

请参阅我制作的 Fiddle 。