溢出之前和之后的高度变化

Question

我有一张桌子。表中的元素是动态添加的。

这是我在溢出之前看到的：

这是我在溢出后看到的：

HTML

<div class="thirdDiv">
                 <div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span id="slSpan" class="value">0%</span>
                     </div>
                 </div>
                 <div class="agent-table-wrap">
                     <table id="agentsTable">
        <tbody><tr id="agentsNames" class="psdg-top">
            <td class="title">Agent Name</td>
            <td class="breakAgentClass">William</td>
            <td class="idelAgentClass">Totti</td>
            <td class="pauseAgentClass">John</td>
            <td class="talkingAgentClass">Sarah</td>
            <td class="voicemailAgentClass">Mike</td>
            <td class="breakAgentClass">William</td>
            <td class="idelAgentClass">Totti</td>
            <td class="pauseAgentClass">John</td>
            <td class="talkingAgentClass">Sarah</td>
            <td class="voicemailAgentClass">Mike</td>
            <td class="breakAgentClass">William</td>
            <td class="idelAgentClass">Totti</td>
            <td class="pauseAgentClass">John</td>
            <td class="talkingAgentClass">Sarah</td>
            <td class="voicemailAgentClass">Mike</td>
        </tr>
    </tbody></table>

                 </div>
             </div>

的CSS

.slNewClass {
    width:20%;
    background-color:#e5412d;
    float:left;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}
.thirdDiv {
    width:100%;
    margin-top:10px;
    overflow:auto;
}

.slNewClass .content {
display: block;
font-size: 20px;
font-weight:bold;
font-weight: 600;
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}
.slNewClass .value {
display: block;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
font: 13px/1.7em "Open Sans", "trebuchet ms", arial, sans-serif;
font-size: 32px;
font-weight: 600;
color:white;
}

.slNewClass .details {
position: relative;
margin-left:15px;
z-index: 11;
float: left;
margin-top: 15px;
text-align: left;
}


.agent-table-wrap {
    margin:0;
    padding:2px;
    /*margin-top:5px;*/
    margin-bottom:10px;
    margin-left:4%;
    font: 14px Arial,Helvetica,sans-serif;
    color:#747474;
    display: inline-block;
    padding-top:0px;
    width:75%;
    overflow-x:auto;
    /*background-color:#0c2a62;*/
}

.agent-table-wrap table{
    border-collapse: collapse;
}

.agent-table-wrap td{
    padding: 10px 15px;
    /*border:1px solid #CED9EC; */
    border:1px solid #FFF; 
}

请问高度变化的原因以及如何解决？

Answer 1

高度正在改变，因为

<td class="title">Agent Name</td>

在第二个例子中，

设置为2行。您可以通过在此td上设置固定宽度或应用css来停止换行来停止此操作

.title {
    white-space: nowrap;
}

Answer 2

.agent-table-wrap table {
    white-space: nowrap;
}

请添加以上内容，以便将来每个td都会受到影响。