Bảng cuộn với HTML và CSS

Question

Tôi có một bảng như thế mà tôi điền vào với một dữ liệu

<table id="products-table" style="overflow-y:scroll" > 
    <thead> 
     <tr> 
      <th>Product (Parent Product)</th> 
      <th>Associated Sites</th> 
      <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     @for (int i = 0; i < Model.Count(); i++) 
     { 
     <tr> 
      <td> 
       <a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br /> 
      </td> 
      <td> 
       <span class="lesser"></span> 
      </td> 
      <td>@Html.ActionLink("Edit Product", "Edit", "Products")<br /> 
       @Html.ActionLink("Associate Site", "Associate", "Products") 
      </td> 
     </tr> 
     } 
     <tr> 
</tbody> 
</table> 

và CSS như thế

#products-table 
{ 
    width: 200px; 
    height: 400px; 
    overflow:scroll; 
} 

nhưng cuộn không làm việc, tôi muốn sửa chữa chiều cao của bảng và nếu nó vượt quá, sau đó làm việc với thanh cuộn

Answer 1

Giải pháp đầu tiên

<table cellspacing="0" cellpadding="0" border="0" width="325"> 
<tr> 
    <td> 
    <table cellspacing="0" cellpadding="1" border="1" width="300" > 
    <tr style="color:white;background-color:grey"> 
     <th>Header 1</th> 
     <th>Header 2</th> 
    </tr> 
    </table> 
    </td> 
</tr> 
<tr> 
<td> 
    <div style="width:320px; height:60px; overflow:auto;"> 
    <table cellspacing="0" cellpadding="1" border="1" width="300" > 
     <tr> 
     <td>new item</td> 
     <td>new item</td> 
     </tr> 
     <tr> 
     <td>new item</td> 
     <td>new item</td> 
     </tr> 
      <tr> 
     <td>new item</td> 
     <td>new item</td> 
     </tr> 
      <tr> 
     <td>new item</td> 
     <td>new item</td> 
     </tr> 
    </table> 
    </div> 
    </td> 
</tr> 
</table> 

quả

này đang làm việc trong tất cả các trình duyệt

Demo jsfiddle http://jsfiddle.net/nyCKE/6302/

Giải pháp thứ hai

Đây là cụ thể để chỉ Mã của bạn, nhưng nó có thể có vấn đề với IE9 vì vậy tôi sẽ đề nghị giải pháp đầu tiên

#products-table 
{ 
width: 200px; 
height: 400px; 
overflow: auto; 
} 

Hoặc Bảng với tiêu đề cố định

tbody { 
width: 200px; 
height: 400px; 
overflow: auto; 
} 

quả

Demo jsfidle http://jsfiddle.net/nyCKE/7588/

Answer 2

Đối với những người tự hỏi làm thế nào để thực hiện giải pháp Garry với nhiều hơn một tiêu đề này là nó:

#wrapper { 
 
    width: 235px; 
 
} 
 

 
table { 
 
    border: 1px solid black; 
 
    width: 100%; 
 
} 
 

 
th, 
 
td { 
 
    width: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
thead>tr { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
tbody { 
 
    display: block; 
 
    height: 80px; 
 
    overflow: auto; 
 
}

<div id="wrapper"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>column1</th> 
 
     <th>column2</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>row1</td> 
 
     <td>row1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>row2</td> 
 
     <td>row2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>row3</td> 
 
     <td>row3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>row4</td> 
 
     <td>row4</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 3

trình chỉ trong Chrome nhưng nó có thể được điều chỉnh để trình duyệt hiện đại khác. Bảng rơi trở lại bảng chung với thanh cuộn trong brws khác. Sử dụng thuộc tính CSS3 FLEX.

http://jsfiddle.net/4SUP8/1/

<table border="1px" class="flexy"> 
    <caption>Lista Sumnjivih vozila:</caption> 
    <thead> 
     <tr> 
      <td>Opis Sumnje</td> 
     <td>Registarski<br>broj vozila</td> 
     <td>Datum<br>Vreme</td> 
     <td>Brzina<br>(km/h)</td> 
     <td>Lokacija</td> 
     <td>Status</td> 
     <td>Akcija</td> 
     </tr> 
    </thead> 
    <tbody> 

     <tr> 
     <td>Osumnjičen tranzit</td> 
     <td>NS182TP</td> 
     <td>23-03-2014 20:48:08</td> 
     <td>11.3</td> 
     <td>Raskrsnica kod pumpe<br></td> 
     <td></td> 
     <td>Prikaz</td> 
     </tr> 
     <tr> 

     <tr> 
     <td>Osumnjičen tranzit</td> 
     <td>NS182TP</td> 
     <td>23-03-2014 20:48:08</td> 
     <td>11.3</td> 
     <td>Raskrsnica kod pumpe<br></td> 
     <td></td> 
     <td>Prikaz</td> 
     </tr> 
     <tr> 

     <tr> 
     <td>Osumnjičen tranzit</td> 
     <td>NS182TP</td> 
     <td>23-03-2014 20:48:08</td> 
     <td>11.3</td> 
     <td>Raskrsnica kod pumpe<br></td> 
     <td></td> 
     <td>Prikaz</td> 
     </tr> 
     <tr> 


     <tr> 
     <td>Osumnjičen tranzit</td> 
     <td>NS182TP</td> 
     <td>23-03-2014 20:48:08</td> 
     <td>11.3</td> 
     <td>Raskrsnica kod pumpe<br></td> 
     <td></td> 
     <td>Prikaz</td> 
     </tr> 

    </tbody> 
</table> 

Phong cách (CSS 3):

caption { 
    display: block; 
    line-height: 3em; 
    width: 100%; 
    -webkit-align-items: stretch; 
    border: 1px solid #eee; 
} 

     .flexy { 
      display: block; 
      width: 90%; 
      border: 1px solid #eee; 
      max-height: 320px; 
      overflow: auto; 
     } 

     .flexy thead { 
      display: -webkit-flex; 
      -webkit-flex-flow: row; 
     } 

     .flexy thead tr { 
      padding-right: 15px; 
      display: -webkit-flex; 
      width: 100%; 
      -webkit-align-items: stretch; 
     } 

     .flexy tbody { 
      display: -webkit-flex; 
      height: 100px; 
      overflow: auto; 
      -webkit-flex-flow: row wrap; 
     } 
     .flexy tbody tr{ 
      display: -webkit-flex; 
      width: 100%; 
     } 

     .flexy tr td { 
      width: 15%; 
     } 

Answer 4

Cuối câu trả lời, ý tưởng khác, nhưng rất ngắn.

1. đặt bảng vào wrapper div
2. đưa các nội dung của các tế bào tiêu đề vào div
3. sửa tiêu đề nội dung, xem CSS

HTML

<div id="scrolltable"> 
    <table> 
     <tr><th><div>first col</div></th><th><div>second</div></th></tr> 
     <tr><td>foo</td><td>bar</td></tr> 
     ... many rows ... 
    </table> 
</div> 

CSS

#scrolltable { margin-top: 20px; height: 200px; overflow: auto; } 
#scrolltable th div { position: absolute; margin-top: -20px; } 

test the fiddle