使用CSS創建帶有固定標題的可滾動div

-1

我想使用CSS創建一個帶有固定表頭的可滾動表格。你能給我一個解決方案嗎？我試圖給Tbody溢出自動和高度，但它不工作。使用CSS創建帶有固定標題的可滾動div

<div class="container"> 
    <div class="table"> 
     <div class="tr header"> 
      <div class="td col1"> 
       heading1sdfsfa 
      </div> 
      <div class="td col2"> 
       heading2 
      </div> 
      <div class="td col3"> 
       heading3 
      </div> 
     </div> 
     <div class="tbody"> 
      <div class="tr"> 
       <div class="td"> 
        4343 
       </div> 
       <div class="td"> 
        444 
       </div> 
       <div class="td"> 
        23 
       </div> 
      </div> 

      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        4234 
       </div> 
      </div>  
      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        4234 
       </div> 
      </div>  
      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        4234 
       </div> 
      </div>  
      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        4234 
       </div> 
      </div>  
      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        4234 
       </div> 
      </div>  
      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        4234 
       </div> 
      </div>  
      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        4234 
       </div> 
      </div>  
      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        4234 
       </div> 
      </div>  
      <div class="tr"> 
       <div class="td"> 
        3323 
       </div> 
       <div class="td"> 
        32423423 
       </div> 
       <div class="td"> 
        423434355454354343 5353454354354354353455334546 
       </div> 
      </div>  
     </div>    
    </div> 
</div>

這裏的風格：

.container{ width:100%; padding-top:25px;padding-top:30px;} 
.table{display:table; width:90%; margin:auto; border-collapse:collapse;} 
.tr{display:table-row;} 
.td{display:table-cell; border:1px solid #ccc; padding:5px;} 

.header .td{color:#fff; background:#000;} 

.tbody{display:table-row-group; height:100px; overflow:auto} 

.td.col1{width:25%;} 
.td.col2{width:50%;} 
.td.col3{width:25%;} 

.scrollable{height:350px; overflow:auto;}

看到我未完成的fiddle here

來源

2012-11-23 aju

這是一個表的數據？如果是這樣，你爲什麼使用'div's？ '是好的，如果它是數據，而不是佈局。 – Andy

-1

CSS不允許你這樣做。我的理由是...

如果不知何故你的CSS會起作用然後會發生什麼是tbody會爲你創建滾動..... 但是然後顯示滾動條它需要空間..... 而那個空間會改變顏色百分比寬度...並且整個結構對齊將會抖動。

這件事將固定寬度以及發生......

如果你瞭解它，然後豎起大拇指:)

來源

2012-11-23 12:01:49

使用CSS創建帶有固定標題的可滾動div

回答

相關問題