使表td不重疊

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添加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 2

試試這個：

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

..它說，最後一列將不包裹。

Answer 3

添加的按鈕電池white-space: nowrap; CSS規則。應該管用。