使表 td 不重叠答案

【问题标题】：Make table td not overlap使表 td 不重叠
【发布时间】：2017-04-06 08:59:46
【问题描述】：

我正在尝试制作一个显示一些数据行的引导表，其中一个包括两个按钮。

问题是，当屏幕调整为更小的尺寸时，按钮会相互重叠，我希望将表格的每个 TD 放在一行中，出现溢出或任何需要的情况。

我已经搜索过，但没有任何答案对我有任何帮助。我不知道我是否遗漏了一些非常明显的东西（可能是这种情况）或者我认为它有点复杂。

这是我的表的副本：http://codepen.io/TheMese/pen/vymEQZ?editors=1100

这只是表格：

<table class="table table-hover table-striped">
        <thead>
          <tr>
            <th>Uid</th>
            <th>Name</th>
            <th>Description</th>
            <th>High Available</th>
            <th>Strict Mode</th>
            <th>Shared</th>
            <th>Nodes Assigned</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>123123</td>
            <td>Node Pool Name</td>
            <td>Node Pool Description</td>
            <td>Node Pool High Availability</td>
            <td>Node Pool Strict Mode </td>
            <td>Node Pool Shared</td>
            <td>Node Pool ASsigned</td>
            <td>
              <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
              <button class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
          </tr>
        </tbody>
      </table>

【问题讨论】：

标签： html css twitter-bootstrap html-table width

【解决方案1】：

为有问题的td 添加white-space: nowrap - 请参阅

Updated codepen

和下面的sn-p：

table > tbody > tr > td:last-child {
  white-space: nowrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        Node Pool List
      </div>
      <div class="table-responsive">
        <div class="panel-body">
          <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th>Uid</th>
                <th>Name</th>
                <th>Description</th>
                <th>High Available</th>
                <th>Strict Mode</th>
                <th>Shared</th>
                <th>Nodes Assigned</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>123123</td>
                <td>Node Pool Name</td>
                <td>Node Pool Description</td>
                <td>Node Pool High Availability</td>
                <td>Node Pool Strict Mode </td>
                <td>Node Pool Shared</td>
                <td>Node Pool ASsigned</td>
                <td>
                  <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
                  <button class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

哇，看来我只是缺少了一个 css 属性。谢谢您的帮助。我接受这个是因为 codepen 和 sn-p :)

【解决方案2】：

试试这个：

td:last-child {
  white-space: nowrap;
}

..它说最后一列不会被包装。

【讨论】：

【解决方案3】：

在按钮单元格上添加white-space: nowrap; css 规则。应该可以。

【讨论】：