调整表格列宽以将文本保持在一行

Question

我有一张桌子

有某些列我不希望我的文本换行/转到下一行，但我不确定如何防止这种情况发生。

红色的

我不希望我的文字转到下一行

绿

把它的数据换到下一行就可以了

---

HTML

<div class="row" style=" margin-right: 15px; margin-left: 15px;">
    <div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 ">
        <div id="piechart"></div>
    </div>
    <div class="col-xs-8 col-sm-9 col-md-9 col-lg-10 ">
        <table class="table table-bordered piechart-key ">
            <thead>
                <th colspan="2" ></th>
                <th>Item Summary</th>
                <th>Item List</th>
            </thead>
            <tbody>
                <tr>
                    <td width="22" ></td>
                    <td width="70" >Incorrect</td>
                    <td width="55" ><span id="pc-danger"></span>/50</td>
                    <td width="100" ><span id="pc-danger-list"></span></td>
                </tr>
                <tr>
                    <td width="22" ></td>
                    <td width="70" >Partially Correct</td>
                    <td width="55" ><span id="pc-warning"></span>/50</td>
                    <td width="100" ><span id="pc-warning-list"></span></td>
                </tr>
                <tr>
                    <td width="22" ></td>
                    <td width="70" >Correct</td>
                    <td width="55" ><span id="pc-success"></span>/50</td>
                    <td width="100" ><span id="pc-success-list"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

---

我也试过使用%作为它的宽度，但似乎没有任何效果。

我该如何解决这个问题？

任何提示/帮助将不胜感激！

Answer 1

您可以在表中设置nowrap第 1th和第 2td位。

.piechart-key th,
.piechart-key td:nth-child(2) {
    white-space: nowrap;
}

要强制文本换行 4th td，您可以这样做。

.piechart-key td:nth-child(4) {
    word-break: break-all;
}

对于width，建议width="100"4号去除td。

UPDATED DEMO