如何修復Bootstrap RWD的前兩列和表頭表

Question

我有一個引導表。我可以在水平滾動時凍結第二列。

我的代碼：

.table>thead:first-child>tr:first-child>th:nth-child(2) { 
 
    position: absolute; 
 
    display: inline-block; 
 
    background-color: #D4D4D4; 
 
    width: 80px; 
 
    /*height: 100%;*/ 
 
} 
 

 
.table>tbody>tr>td:nth-child(2) { 
 
    position: absolute; 
 
    display: inline-block; 
 
    background-color: #D4D4D4; 
 
    width: 80px; 
 
    /*height: 100%;*/ 
 
} 
 

 
.table>thead:first-child>tr:first-child>th:nth-child(3) { 
 
    padding-left: 100px; 
 
} 
 

 
.table>tbody>tr>td:nth-child(3) { 
 
    padding-left: 100px !important; 
 
}

<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
     <a class="navbar-brand" href="#">WebITD</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <h2>Table Bootstrap</h2> 
 
    <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> 
 
    <div class="table-responsive"> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>#</th> 
 
      <th>Firstname</th> 
 
      <th>Lastname</th> 
 
      <th>Age</th> 
 
      <th>City</th> 
 
      <th>Country</th> 
 
      <th>Country2</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>6</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>7</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>8</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>9</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>10</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>11</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     <tr> 
 
      <td>12</td> 
 
      <td>Anna</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>New York</td> 
 
      <td>USA</td> 
 
      <td>Canada</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

這是我Fiddle

如果我想凍結前兩列（＃和名字）和表頭，而滾動。我該如何修改？謝謝！

Answer 1

你可以用同樣的方式，只需添加縮進：

 .table > tbody > tr > td:nth-child(1) { 
      position: absolute; 
      display: inline-block; 
      background-color: #D4D4D4; 
      width:40px; 
      /*height: 100%;*/ 
     } 

     .table > tbody > tr > td:nth-child(2) { 
      position: absolute; 
      display: inline-block; 
      background-color: #D4D4D4; 
      width:80px; 
      left:40px; 
      /*height: 100%;*/ 
     }