使用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

回答

相关问题