如何修復表格標題左側部分和右側部分僅滾動中間部分

我正在搜索結果，但是我還沒有找到任何結果。如何修復表格標題左側部分和右側部分僅滾動中間部分

我想一個簡單的表，現在我有三個問題：

是如何固定頭（粗體部分區域）的
如何固定的左部（1類型文本區域）
如何固定右段（7類型的文本是）

HTML

<div class="m-m"> 
<table class="demo-table"> 
    <tr> 
     <td>fixed area</td> 
     <td>fixed area</td> 
     <td>fixed area</td> 
     <td>fixed area</td> 
     <td>fixed area</td> 
     <td>fixed area</td> 
     <td>fixed area</td> 
    </tr> 
    <tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr> 
    <tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr><tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr><tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr><tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr><tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr><tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr><tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr><tr> 
     <td>fixed area</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>fixed area</td> 
    </tr> 

</table> 
</div>

的CSS

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
.m-m{ 
width:200px; 
height:200px; 
margin:0 auto; 
overflow:scroll; 
} 
.demo-table{ 
border:solid 1px red; 
width:100%; 

} 
.demo-table tr:first-child td{ 
font-weight:bold; 
} 

.demo-table tr td{ 
border:solid 2px green; 
padding:5px; 
}

我想這導致

enter image description here

來源

2013-03-19 Rohit Azad

我懷疑你可以用任何一種優雅的方式實現這一點。如果此標記用於佈局，則不應使用

。如果你能詳細說明你的用例（什麼是內容/上下文，爲什麼你想要修復一些內容），建議替代方案會更容易。 – xec2013-03-19 11:38:53

@xec我知道的位置固定，但這是表格數據，所以我需要在表......... – 2013-03-19 11:42:09

好的。祝你好運:) – xec 2013-03-19 11:43:39

回答

好，圖像更好地解釋你想做的事。如果您可以在表格的標題和正文上設置固定寬度，則可以將它們分開設置。

我在這裏放置了一個jsFiddle http://jsfiddle.net/3Lxj3/1/可能會有所幫助。

<div id="header"> 
    <div style="width:40%;">header 1</div> 
    <div style="width:30%;">header 2</div> 
    <div style="width:30%;">header 3</div> 
    <div style="clear:both"></div> 
</div> 
    <div style="clear:both"></div> 
<div id="left"> 
    <div>row 1</div> 
    <div>row 2</div> 
    <div>row 3</div> 
    <div>row 4</div> 
</div> 
<div id="body"> 
    <table> 
    <tr> 
    <td style="width:40%;">contents 1</td> 
    <td style="width:30%;">contents 2</td> 
    <td style="width:30%;">contents 3</td> 
    </tr> 
    <tr> 
    <td style="width:40%;">contents 1</td> 
    <td style="width:30%;">contents 2</td> 
    <td style="width:30%;">contents 3</td> 
    </tr> 
    <tr> 
    <td style="width:40%;">contents 1</td> 
    <td style="width:30%;">contents 2</td> 
    <td style="width:30%;">contents 3</td> 
    </tr> 
    <tr> 
    <td style="width:40%;">contents 1</td> 
    <td style="width:30%;">contents 2</td> 
    <td style="width:30%;">contents 3</td> 
    </tr> 
    </table> 
</div> 
<div id="right"> 
    <div>check 1</div> 
    <div>check 2</div> 
    <div>check 3</div> 
    <div>check 4</div> 
</div>

CSS：

#body table { 
width:100%; 
} 
#header, #left, #body table { 
    border:1px solid #ccc; 
} 
table tr td { 
    height:50px; 
} 
#header { 
    margin-left:20%; 
    margin-right:20%; 
    width:59%; 
} 
#header div { 
    float:left; 
} 
#body { 
    width:59%; 
    float:left; 
    overflow:scroll; 
    height:200px; 
} 
#left { 
    float:left; 
    width:20%; 
    height:200px; 
} 
#left div { 
    height:50px; 
} 
#right { 
    float:left; 
    width:20%; 
    height:200px; 
} 
#right div { 
    height:50px; 
}

基本上您將頭和身體分開的，但要確保它們垂直對齊。這並不漂亮，但它的工作原理。

來源

2013-03-19 13:38:26 kumaheiyama

它不適用於我 - 如果我添加了足夠的行以便實際滾動，則行標題將繼續向下，而數據行僅限於滾動框。如果您有足夠的標題向右滾動，則相同。當然，當發生這種情況時，如果您滾動數據，則標題不會隨其一起滾動。 – Adrian 2013-03-19 14:03:57

@Adrian：那是因爲它不應該。Rohit Azad寫道，他希望水平和垂直標題是固定的，以及右邊的複選框。我這_not_我怎麼會解決這個否則... :-) – kumaheiyama 2013-03-20 13:23:28

這似乎並不是OP想要的，基於他張貼的截圖。 – Adrian 2013-03-20 13:52:17

相關問題