テーブルを重ならないようにする

Question

私は2つのボタンを含むいくつかのデータ行を表示するブートストラップテーブルを作ろうとしています。

問題は、画面が小さいサイズにリサイズされると、ボタンが互いの上に乗って、テーブルの各TDを1つの行に入れてオーバーフローなどが必要になることです。

私は検索しましたが、答えのどれもが私を助けませんでした。かなり明白な（おそらくそうかもしれない）ものが欠けているのか、私が信じているより複雑なものか分かりません。ここで

は、私のテーブルのレプリカです：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; 
} 

最後の列はできませんと言う..it包まれた。

Answer 3

ボタン電池のwhite-space: nowrap; CSSルールを追加します。うまくいくはずです。