调整 table 列宽以使文本保持在一行中

Question

我有一个table

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

红色

我不想让我的文字转到下一行

绿色

数据换到下一行就可以了

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

th,
td {
  white-space: nowrap;
}
td span {
  white-space: normal;
}

<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="120">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">Item-inside Item-inside Item-inside</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

您可以在 th 上设置 nowrap，在 table 中设置第二个 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，建议删除width="100"4号td。

UPDATED DEMO

调整 table 列宽以使文本保持在一行中

Adjust table column width to keep the text in one line

html

css

html-table

HTML