Question

我试图创建一个显示一些数据行的引导表，其中一个包括两个按钮。

问题在于，当屏幕调整到较小的尺寸时，按钮会相互叠加，我希望将表中的每个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>

Answer 1

试试这个：

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

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

Answer 2

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

Updated codepen

下面的

和摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

使表td不重叠

3 个答案: