使用div而不是表格我如何鎖定第一個標題行

我想要做的是有一組使用display：table，display：table-row等表格的div。所有這些表格包含在其上有滾動條的另一個div容器的內部。當我滾動這個外容器我想的第一行滾動並保持可見使用div而不是表格我如何鎖定第一個標題行

如果我有以下的HTML

<div class="tableContainer"> 
    <div class="divTable"> 
     <div class="divRow headerRow"> 
      <div class="divCell header">A</div> 
      <div class="divCell header">B</div> 
      <div class="divCell header">C</div> 
      <div class="divCell header">D</div> 
      <div class="divCell header">E</div> 
      <div class="divCell header">F</div> 
      <div class="divCell header">G</div> 
      <div class="divCell header">H</div> 
     </div> 

     <div class="divRow"> 
      <div class="divCell">something</div> 
      <div class="divCell">something</div> 
      <div class="divCell">something</div> 
      <div class="divCell">something</div> 
      <div class="divCell">something</div> 
      <div class="divCell">something</div> 
      <div class="divCell">something</div> 
      <div class="divCell">something</div> 
     </div> 

     <!--repeat above row a bunch of times to make the scrollbar appear--> 
    </div> 
</div>

下面CSS

.tableContainer { 
    height: 500px; 
    overflow: auto;  
} 

.divTable { 
    display: table; 
    position: relative; 
} 

.divRow { 
    display: table-row; 
} 

.headerRow { 
    display: table-row; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    z-index: 1000; 
    background-color: white; 
} 

.divCell { 
    display: table-cell; 
    padding: 3px; 
} 

.header { 
    font-weight: bold; 
}

和下面的jQuery腳本

$('.tableContainer').scroll(function() { 
     $('.headerRow').css('top', $('.tableContainer').scrollTop() + 'px'); 
    });

如果我運行上面的東西，我可以看到headerRow，但顯然它從不移動，它只停留在桌子的頂部並滾動出視野。我可以讓它向下滾動的唯一方法是如果我將headerRow類更改爲絕對定位，但是如果我這樣做，則它會中斷列寬，並且標題行與詳細信息行的列寬不同。

來源

2013-03-27 Paul Cavacas

這將以與使用表格相同的方式工作。你將不得不計算列的寬度並將它們應用到標題行。有沒有理由你使用div而不是表格？只是不喜歡桌子？ – 2013-03-27 15:04:54

還有一些其他的東西，我想要做這些，並希望他們在divs易於使用的其他我想要的東西。 – 2013-03-27 15:06:42

基本上將你的「table tbody」放置在一個具有設定高度的可滾動div內，這樣它就可以滾動，但讓你的「table thead」保持在該可滾動div之外。那麼您需要計算列寬並將其應用於「table thead」列。 – 2013-03-27 15:07:00

如果我understod您的問題正是那麼這裏就是你可以嘗試什麼......

<script> 

$(document).ready(function(){ 


$('.tableContainer').scroll(function() { 
    $('.headerRow') 
      .stop() 
      .animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "slow"); 
}); 
});

來源

2013-03-27 15:22:37 alwaysLearn

看到http://codepad.viper-7.com/kOn9Gj – alwaysLearn 2013-03-27 15:35:00

這沒有奏效 – 2013-03-28 16:14:42

是codepad viper沒有顯示你想要什麼..？ – alwaysLearn 2013-03-28 16:16:37

當你使用一個固定的寬度也很簡單。看一看這個CSS：在這個fiddle

$(document).ready(function() { 
    var cellWidth = $(".divCell").css("width"); 
    var tableWidth = $(".divRow").css("width"); 
    $(".headerRow").css({ 
     "width": tableWidth, 
     "position": "fixed" 
    }).find(".divCell").css("width", cellWidth); 
});

例子：如果你想有一個非固定寬度

html, body { 
    margin:0; 
} 
.tableContainer { 
    height: 200px; 
    overflow: auto; 
} 
.divTable { 
    display: table; 
    position: relative; 
    width: 600px; 
    margin-top: 1.2em; 
} 
.divRow { 
    display: table-row; 
} 
.headerRow { 
    width: 600px; 
    display: table-row; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    z-index: 1000; 
    background-color: rgba(255,255,255,0.6); 
} 
.divCell { 
    display: table-cell; 
    padding: 3px; 
    width: 75px; 
} 
.header { 
    font-weight: bold; 
}

，試試這個。如果沒有JS支持，它提供了一個很好的回退：標題停留在表中。

來源

2013-03-27 16:06:39 jakschu

使用div而不是表格我如何鎖定第一個標題行

回答

相關問題