使 table td 不重叠

Question

我正在尝试制作一个 bootstrap table 来显示一些数据行，其中一个包含两个按钮。

问题是，当屏幕尺寸调整到更小的尺寸时，按钮会相互重叠，我希望 table 的每个 TD 都在一行中，有溢出或任何它需要的东西。

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

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

这里只是 table:

<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>

Answer 1

试试这个：

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

..它说最后一列不会换行。

Answer 2

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

Updated codepen

和下面的代码片段：

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>

Answer 3

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

使 table td 不重叠

Make table td not overlap

html

css

html-table

width

twitter-bootstrap