css-formatted表格divs ['table'] w /固定頭和兩個x/y滾動

我發現了一些在stackoverflow上解決我的類似問題的帖子，但沒有一個足夠類似，我只是不能解決這個問題...我有表格輸出，可能會超過寬度，高度，或兩者的可視面積。輸出附帶一個標題。如果輸出超出高度，用戶應該能夠向上/向下滾動，但標頭必須保持固定。如果輸出超出水平區域，用戶應該能夠向左/向右滾動，並且標題必須移動w /內容。css-formatted表格divs ['table'] w /固定頭和兩個x/y滾動

我已經嘗試過溢出的各種組合：scroll，overflow：scroll-x [和scroll-y]，overflow：auto，w /表頭兩部分內容，並且與之分開。我見過只有混合的成功;或者我可以讓標題沿着內容滾動l/r，並且它在垂直滾動時消失，或者我可以在垂直滾動的情況下使標題保持固定，但是如果輸出水平滾動，它仍然是固定的。

這裏的a fiddle w /一些html，我用作起點。

[code]jsfiddle code[/code]

約束

，輸出必須是div的，如在例子。我不能使用<表>
解決方案必須的CSS/HTML而已，沒有焦耳/秒，jQuery的，等等

任何幫助表示讚賞！

來源

2014-02-19 david furst

即使您提供了一個元素position: fixed;或position: absolute;，也無法使用純CSS/html實現該功能。通過這樣做，你不能移動元素，因爲滾動元素在頁面上的位置不會改變，並且不可能從css或html獲取元素的滾動值。

所以，你可以找到的唯一解決方案是使用javascript

來源

2014-02-19 04:53:24 Ismatjon

如果你可以設置一個寬度一些你的div這個可以用純CSS/HTML的起點：

.row div, .head div { 
    display: inline; 
} 
.head, .rows { 
    width: 160px; 
} 
.rows { 
    height: 40px;   // this height is set to force scroll 
    overflow-y: scroll; 
} 
.tbl { 
    width: 100px;   // this width is set to mimic small width 
    overflow: auto; 
} 


<div class='tbl'> 
    <div class='head'> 
     <div>head 1</div> <div>head 2</div> <div>head 3</div> 
    </div> 
    <div class='rows'> 
     <div class='row'> 
      <div>data 1</div> <div>data 1</div> <div>data 1</div> 
     </div> 
     <div class='row'> 
      <div>data 2</div> <div>data 2</div> <div>data 2</div> 
     </div> 
     <div class='row'> 
      <div>data 2</div> <div>data 2</div> <div>data 2</div> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/jL4ch/

來源

2014-02-19 05:36:58 LGSon

+1絕對正確 – Leo

太棒了！但我仍然有一個小問題。當我讓表格變大時，'inline'使數據一起運行，甚至使用'min-width'（參見[link]（http://i1222.photobucket.com/albums/dd496/frabjousday123/Untitled-1.jpg）））。當我使用'display：table-cell'時，它看起來更好，但是然後標題單元開始'移動'離開列越遠（參見[link]（http://i1222.photobucket.com/albums/dd496/） frabjousday123 /無標題-2.JPG））。當我嵌套（使用'table-header-group'等等）和使用'min-width'給我2個滾動條時也是如此。：/任何想法如何我可以擺脫標題列徘徊？ –

將'inline'更改爲'inline-block'以強制設置'min-width'，並且您可能需要設置'white-space：nowrap;'將文本保留在1行......檢查所有邊距/填充以查看是否那些導致「漫遊」（或更新你的代碼在jsfiddle，所以我可以看看）...也檢查，以便您的標題單元格在行 – LGSon

我想通了。有幾件事情采取注：

寬度可以發揮功能瓦特/任何內嵌塊的結構化風格，包括inline-block，例如。你不必使用table-cell。僅使用inline將導致瀏覽器忽略width:元素。
這是非常愚蠢的，但如果你使用overflow-x，你還必須說明一個overflow-y政策明確，或者你得到2個滾動條。訣竅是宣佈軸w /所需的約束爲auto，另一個溢出爲hidden。

here是一個jsfiddle，說明我的解決方案。小提琴內嵌了寬度，因爲在現實生活中，表格數據實際上是動態生成的，並且列寬度將不會具有相同的值，如在示例中所示。

來源

2014-02-20 19:45:25

css-formatted表格divs ['table'] w /固定頭和兩個x/y滾動

回答

相關問題