Question

我在这里看了很多部分，其他人试图弄清楚如何让我的标题在滚动时留在一个地方。似乎我需要涉及＆＃34; position：fixed＆＃34;在我的JSP中，但它所做的就是将我的标题放在我的<div>框中。如果可能的话可以看到我可能缺少的东西，或者还有更多需要。

这是我的mainEFT.jsp（我知道我的TD格式有点乱）：

  <article class="divBoxsum">
     <div style="height:300px; overflow:auto;">
         <table>
           <thead>
              <tr>
                  <th>SEL</th>
                  <th>Schedule Number</th>
                  <th>Contract Year</th>
                  <th>Creation Date</th>
                  <th>Num of Pay Recs</th>
                  <th>Schedule Total</th>
                  <th>Status</th>
                  <th>Status Date</th>
                  <th>Approval ID</th>
            </tr>
        </thead>
        <tbody>
             <c:forEach  var="row" items="${EFTresults}">
             <c:set var="sched" value="${row.getSCHEDULE_NUMBER()}" />
             <c:set var="eftyear" value="${row.getEFT_CONTRACT_YEAR()}" />
             <fmt:formatNumber var="schedTotl" value="${row.getTOTAL_AMOUNT()}" pattern="$##,###,##0.00"/>
                 <tr>
                   <td width="65px;"><input type="submit" 
                                   formaction="EFTscreen?action=detailEFT&scheduleNumber=${sched}&contractYear=${eftyear}"
                                   value="Select" style="height: 25px; width: 65px; background-color: #0C6;
                                   font-family: 'Source Sans Pro', sans-serif;   
                                   font-size:15px; font-weight:bold; color:#eee;" title="Select Schedule">
               </td>
               <td><c:out value="${row.getSCHEDULE_NUMBER()}" /></td>
                                <td><c:out value="${row.getEFT_CONTRACT_YEAR()}" /></td>
               <td width="165px";><c:out value="${row.getCREATION_DATE()}"/></td>
               <td width="50px";><c:out value="${row.getNUM_OF_PAY_RECORDS()}"/></td>
               <td style="text-align: right; padding-right: 10px;"><c:out value="${schedTotl}"/></td>
               <td><c:out value="${row.getSTATUS()}"/></td>
               <td width="205px";><c:out value="${row.getSTATUS_DATE()}"/>/td>
               <td><c:out value="${row.getAPPR_HUD_EMPLOYEE()}"/></td>
                </tr>
              </c:forEach>

           </tbody>
      </table>
   </div>

</article>

这是我的CSS：

.divBoxsum {
  height: 350px; 
  width: 50%; 
  border: 1px solid #343131; 
  -moz-border-radius: 6px; 
  -webkit-border-radius: 6px; 
  border-radius: 6px; 
  display: block;
  margin-top: 35px;
  margin-left: 30px; 
  float: left;  
}

table {
  width: 95%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: "Open Sans", sans-serif;
  font-style: normal; 
  font-size: 14px;
  margin-left: 10px; 
  margin-right: 175px;      
}

th { 
  background: #394065; 
  border-bottom-color: #16a085;
  color: white;             
}

td, th { 
  padding: 3px; 
  border: 1px solid black; 
  text-align: left; 
}

Answer 1

在这种情况下，您不需要position:fixed。

你需要：

为height

<tbody>

为overflow-y: scroll

<tbody>

示例：

＆＃13;
＆＃13;
thead, tbody { display: block; } tbody { height: 140px; overflow-y: scroll; } th, td { width: 120px; border: 1px solid rgb(0,0,0); } th { color: rgb(255,255,255);; background-color: rgb(191,0,0); } td { color: rgb(0,0,0);; background-color: rgb(221,255,221); }
＆＃13;
<table> <thead> <th>SEL</th> <th>Schedule Number</th> <th>Contract Year</th> <th>Creation Date</th> <th>Num of Pay Recs</th> <th>Schedule Total</th> <th>Status</th> <th>Status Date</th> <th>Approval ID</th> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> </tbody> </table>
＆＃13;
＆＃13;
＆＃13;

在表格上滚动时获取固定标题

1 个答案: