2012-11-07 28 views
0

我有4列的表格。我只需要爲tbody右側應用滾動條。 我把滾動條放在tbody中。直到我申請TBODY類= bankerScroll排列是罰款4列和並行數據顯示但在我申請bankerScroll類tboday對準越來越亂..任何人都可以helpp我這...如何將滾動條應用於動態內容的tbody版權

<table> 
         <colgroup><col width="40%"><col width="23%"><col width="24%"><col width="13%"></colgroup> 
         <thead> 
          <tr> 
           <th><p class="fieldLabel">Name</p></th> 
           <th><p class="fieldLabel">Value1</th> 
           <th><p class="fieldLabel">Value2</th> 
           <th><p class="fieldLabel">Value3</th> 
          </tr> 
         </thead> 
         <tbody class="bankerScroll"> 
          <tr> 
           <td><input class="banker-name" name="send-to-banker" id="banker_0" type="checkbox"> <label for="banker_0">JOHN </td> 
           <td><input disabled="disabled" name="banker_1" type="checkbox"></td> 
           <td><input disabled="disabled" name="banker_2" type="checkbox"></td> 
           <td><input disabled="disabled" name="banker_3" type="checkbox"></td> 
          </tr> 
          <tr> 
           <td><input class="banker-name" name="send-to-banker" id="banker_4" type="checkbox"> <label for="banker_0">JOHN </td> 
           <td><input disabled="disabled" name="banker_5" type="checkbox"></td> 
           <td><input disabled="disabled" name="banker_6" type="checkbox"></td> 
           <td><input disabled="disabled" name="banker_7" type="checkbox"></td> 
          </tr> 
          <tr> 
           <td><input class="banker-name" name="send-to-banker" id="banker_8" type="checkbox"> <label for="banker_0">JOHN </td> 
           <td><input disabled="disabled" name="banker_9" type="checkbox"></td> 
           <td><input disabled="disabled" name="banker_10" type="checkbox"></td> 
           <td><input disabled="disabled" name="banker_11" type="checkbox"></td> 
          </tr> 

         </tbody> 
         </table> 

CSS 




.dataRow { 
    margin-bottom: 5px; 
    margin-top: 5px; 
} 
    border-collapse: collapse; 
    width: 100%; 
} 
.fieldLabel { 
    color: #000000; 
    font-size: 85%; 
    font-weight: bold; 
} 
P, TABLE { 
    font-family: Verdana; 
    margin: 0; 
    text-align: left; 
} 
.requiredFieldIndicator { 
    color: #0088FF; 
    font-size: x-small; 
    font-weight: bold; 
} 
TD { 
    padding: 2px; 
    vertical-align: top; 
} 

.bankerScroll 
{ 
    style="overflow:auto;height:100px;display:block;border:1px solid red; 
} 

回答

1

試試這個

.scrollClass{ 
    height:100px; 
    overflow-y: scroll; 
    overflow-x: auto; 
    display:block; 
    border:2px solid blue; 
    width:100%; 
} 

希望這有助於!

+0

感謝您的回覆。右側滾動即將到來,但tbody的內容仍然混亂..一切都變得對齊了。它應該與此4列平行排列。 –

+0

嘗試通過減小寬度任何一列的5%。 – Narendra