ブートストラップ応答テーブルの固定サイズを1行に保持するにはどうすればよいですか？

Question

私はブートストラップから応答テーブルを使用します。私は最初の行を常に500pxにしておきたい。私は、ウィンドウのサイズを変更する場合でも、それは500pxなどに滞在しません：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
    
 
<div class="table-responsive"> 
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th style="width:500px">#</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     </tr> 
 
     <tr> 
 
     <td>3</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

だけmin-width:500px;にwidth:500pxを変更し、ジョブが

Answer 2

これはおそらく、それを修正する必要があります。しかし、あなたは応答性に問題があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
    
 
<div class="table-responsive"> 
 
     <table class="table"> 
 
     <thead> 
 
      <tr> 
 
      <th style="min-width:500px">#</th> 
 
      <th>Table heading</th> 
 
      <th>Table heading</th> 
 
      <th>Table heading</th> 
 
      <th>Table heading</th> 
 
      <th>Table heading</th> 
 
      <th>Table heading</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>1</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      </tr> 
 
      <tr> 
 
      <td>2</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      </tr> 
 
      <tr> 
 
      <td>3</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      <td>Table cell</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div>