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

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和第二th设置td。

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

要强制文本在第4 td页中换行，您可以这样做。

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

对于width，建议您在第4个width="100"删除td。

的 UPDATED DEMO

Answer 2

＆＃13;

＆＃13;

<?php

class dog{

    public $name;

    public function __construct($name){

        $this->name = $name;
        echo "created dog $name <br/>";

    }
    public function __destruct()
    {

        echo "destroyed dog $this->name <br/>";
    }

}

for($i = 0;$i<=2;$i++)
{

    $dog = new dog($i);

}


$dog = new dog("last");

?>

＆＃13;

created dog 0 
created dog 1 
destroyed dog 0 
created dog 2 
destroyed dog 1 
created dog last 
destroyed dog 2 
destroyed dog last 

＆＃13;

＆＃13;

＆＃13;