Cách tạo bảng html theo chiều dọc có thể cuộn

74

Tại sao bạn không đặt bảng của bạn trong một div?

<div style="height:100px;overflow:auto;"> 

... Your code goes here ... 

</div>

Nguồn

2012-06-22 08:07:22 sushil

+2

+1 đơn giản, nhưng hiệu quả cao –

+27

Một div không có ngữ nghĩa bảng và không giải quyết - tách rời nhiều div - vấn đề của một bảng cuộn phía sau tiêu đề bảng. – Javarome

2

Hi thử với điều này overflow-y: cuộn. Tôi hy vọng nó có thể giúp bạn

Nguồn

2012-06-22 08:06:37 muthu

+1

overflow-y không phải là tên thuộc tính css đã biết và không sử dụng số –

+0

sử dụng div thay vì bảng – muthu

3

Plugin jQuery có lẽ là lựa chọn tốt nhất. http://farinspace.com/jquery-scrollable-table-plugin/

Để sửa tiêu đề bạn có thể kiểm tra bài này

Fixing Header of GridView or HtmlTable (thre có thể là vấn đề mà điều này sẽ làm việc trong IE chỉ)

CSS để sửa chữa tiêu đề

div#gridPanel 
{ 
    width:900px; 
    overflow:scroll; 
    position:relative; 
} 


div#gridPanel th 
{ 
    top: expression(document.getElementById("gridPanel").scrollTop-2); 
    left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 
    position: relative; 
    z-index: 20; 
    } 

<div height="200px" id="gridPanel" runat="server" scrollbars="Auto" width="100px"> 
table.. 
</div>

hoặc

Bài đăng rất hay tại đây isr này

How to Freeze Columns Using Javascript and HTML.

hoặc

Không nó không thể thực hiện nhưng bạn có thể tận dụng div và đặt bảng trong div

<div style="height: 100px; overflow: auto"> 
    <table style="height: 500px;"> 
    ... 
    </table> 
</div>

Nguồn

2012-06-22 08:06:42

+0

. nhưng tiêu đề cũng là cuộn dọc tôi phải làm cho tbody cuộn với tiêu đề cố định thead .. nếu u muốn mã html sau đó tôi đặt jsbin. –

+0

nó không phải là gridvies của nó chỉ html bảng ..in css nhận được biểu hiện lỗi không hợp lệ thuộc tính cho top –

+0

@Nikhil - điều này sẽ làm việc trong IE chỉ của nó tốt hơn bạn sử dụng liên kết jQuery plugin được đưa ra bởi tôi ở đầu trong anwwer sẽ giúp bạn để đạt được nhiệm vụ của bạn dễ dàng .. –

4

Cách tốt nhất để làm điều này bị nghiêm tách bảng của bạn thành hai bảng khác nhau - tiêu đề và cơ thể:

<div class="header"> 
    <table><tr><!-- th here --></tr></table> 
</div> 

<div class="body"> 
    <table><tr><!-- td here --></tr></table> 
</div> 

.body { 
    height: 100px; 
    overflow: auto 
}

Nếu bảng có chiều rộng lớn (hơn chiều rộng màn hình), sau đó bạn phải thêm sự kiện cuộn cho tiêu đề cuộn ngang và nội dung đồng bộ.

Bạn không bao giờ nên chạm vào thẻ bảng (table, tbody, thead, tfoot, tr) với thuộc tính CSS hiển thị và tràn. Đối phó với trình bao bọc DIV là thích hợp hơn nhiều.

Nguồn

2012-06-22 08:07:34 odiszapc

+1

+1, mặc dù sử dụng "body" và "header" khi lớp css tấn công tôi như một chút kỳ quặc! – Andomar

+2

Tách tiêu đề bảng khỏi nội dung của nó như thế này có vẻ như thực hành không tốt. Đó là những gì 'tbody' và' thead' là dành cho. – You

+7

Các cột sẽ không bao giờ xếp hàng chính xác mà không xác định rõ từng chiều rộng. Điều này dường như không phải là một cách tiếp cận tốt. –

1

Đây là công việc xung quanh.

http://jsfiddle.net/JJV59/2/

[EDIT]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

</head> 
<body> 

<table cellspacing="1" width="100%" bgcolor="#cccccc"> 
    <thead> 
     <tr> 
      <td bgcolor="#ffffff" width="70px"> 
      </td> 
      <td class="csstablelisttd" width="70px"> 
       <b>Time Slot&nbsp;</b> 
      </td> 
      <td class="csstablelisttd"> 
       <b>&nbsp;Patient Name</b> 
      </td> 
     </tr> 
    </thead> 
</table> 
<!-- THIS GIVES THE SCROLLER --> 
<div style="height: 500px; overflow-y: auto"> 
    <table id="tableAppointment" cellspacing="1" width="100%" bgcolor="#cccccc"> 
     <tbody> 
      <tr> 
       <td class="csstablelisttd" valign="top" width="70px"> 
        8:00AM 
       </td> 
       <td class="csstablelisttd" width="70px"> 
        0 
       </td> 
       <td class="csstablelisttd"> 
        <span>Name 1</span> 
       </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         9:00AM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         10:00AM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         11:00AM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         12:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         01:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         02:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         03:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         04:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         05:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         06:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         07:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         15 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         30 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd"> 
        </td> 
        <td class="csstablelisttd"> 
         45 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
       <tr> 
        <td class="csstablelisttd" valign="top" width="90px"> 
         08:00PM 
        </td> 
        <td class="csstablelisttd"> 
         0 
        </td> 
        <td class="csstablelisttd"> 
         <span></span> 
        </td> 
       </tr> 
      </tbody> 
     </table>  
    </div> 

</body> 
</html>

Nguồn

2012-06-22 08:10:10 Rishabh

+0

u có thể putt toàn bộ html trong câu trả lời ur .in jsfiddle i unabele để nhận html –

+0

ru there.put html –

+0

xin lỗi, đọc sai bình luận trước đó của bạn, cập nhật câu trả lời ngay – Rishabh

16

Chỉ cần thêm màn hình hiển thị: block với thead> tr và tbody. kiểm tra ví dụ bên dưới

http://www.imaputz.com/cssStuff/bigFourVersion.html

Nguồn

2012-06-22 08:15:16 Viralk

+1

hi im khá câm. làm thế nào để tôi sử dụng ví dụ? Tất cả những gì tôi thấy là bàn làm việc trên trang web đó: ( – stackPusher

9

Hãy thử cái này .. Đang hoạt động ...Tại đây JSBIN

table tbody { height:300px; overflow-y:scroll; display:block; } 
table thead { display:block; }

Nguồn

2012-06-22 08:15:40

+1

Điều đó sẽ không hiệu quả. Thêm đường viền xung quanh các ô trong bảng của bạn và bạn sẽ thấy tại sao. Http://jsbin.com/iveroj/114/edit – Zilk

+0

Phương pháp này sẽ hoạt động nếu bạn chiếm chiều rộng của thanh cuộn như một phần của tiêu đề, điều này có nhiều rắc rối hơn là giá trị của nó. Về cơ bản bạn cần làm cho phần đầu rộng hơn 21px so với phần thân của tài khoản cho chiều rộng thanh cuộn, tại ít nhất trong Chrome 34.0.1847.131 m chạy trong Windows 7. – nodonoghue

0

Tôi đã chiến đấu với điều này một thời gian. Mục tiêu của tôi là có một bảng với các tiêu đề mà độ rộng của mỗi cột tiêu đề giống với cột nội dung tương ứng và là kích thước tối thiểu cần thiết để phù hợp với dữ liệu. cũng dữ liệu nội dung có thể cuộn được bên dưới tiêu đề.

Tôi đã giải quyết vấn đề này bằng cách sử dụng div chứ không phải bảng. Mỗi "bảng" là một div với tiêu đề là một div của divs và cơ thể là một div của divs. Tôi đã sử dụng kiểu như được chỉ ra bởi @sushil ở trên. Tôi đã thêm một chút javascript/jQuery để cân bằng các cột. Có thể 20-30 dòng.

Rất tiếc, tôi đã mất mã và phải tạo lại mã. Tôi biết đây là một chút cũ, nhưng có lẽ nó sẽ giúp người khác.

Nguồn

2014-11-30 12:48:50 AixNPanes

2

Đây là giải pháp của tôi (trong mùa xuân với Thymeleaf và jQuery):

html:

<!DOCTYPE html> 
<html 
    xmlns:th="http://www.thymeleaf.org" 
    xmlns:tiles="http://www.thymeleaf.org"> 
    <body> 
     <div id="objects" th:fragment="ObjectList"> 
      <br/> 
      <div id='cap'> 
       <span>Objects</span> 
      </div> 
      <div id="hdr"> 
       <div> 
        <div class="Cell">Name</div> 
         <div class="Cell">Type</div> 
       </div> 
      </div> 
      <div id="bdy"> 
       <div th:each="object : ${objectlist}"> 
         <div class="Cell" th:text="${object.name}">name</div> 
         <div class="Cell" th:text="${object.type}">type</div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

css:

@CHARSET "UTF-8"; 
#cap span { 
    display: table-caption; 
    border:2px solid; 
    font-size: 200%; 
    padding: 3px; 
} 
#hdr { 
    display:block; 
    padding:0px; 
    margin-left:0; 
    border:2px solid; 
} 
#bdy { 
    display:block; 
    padding:0px; 
    margin-left:0; 
    border:2px solid; 
} 
#objects #bdy { 
    height:300px; 
    overflow-y: auto; 
} 
#hdr div div{ 
    margin-left:-3px; 
    margin-right:-3px; 
    text-align: right; 
} 
#hdr div:first-child { 
    text-align: left; 
} 
#bdy div div { 
    margin-left:-3px; 
    margin-right:-3px; 
    text-align: right; 
} 
#bdy div div:first-child { 
    text-align: left; 
} 
.Cell 
{ 
    display: table-cell; 
    border: solid; 
    border-width: thin; 
    padding-left: 5px; 
    padding-right: 5px; 
}

javascript:

$(document).ready(function(){ 
    var divs = ['#objects']; 
    divs.forEach(function(div) 
    { 
     if ($(div).length > 0) 
     { 
      var widths = []; 
      var totalWidth = 0; 
      $(div+' #hdr div div').each(function() { 
       widths.push($(this).width()) 
      }); 
      $(div+' #bdy div div').each(function() { 
       var col = $(this).index(); 
       if ($(this).width() > widths[col]) 
       { 
        widths[col] = $(this).width(); 
       } 
      }); 
      $(div+' #hdr div div').each(function() { 
       var newWidth = widths[$(this).index()]+5; 
       $(this).css("width", newWidth); 
       totalWidth += $(this).outerWidth(); 
      }); 
      $(div+' #bdy div div').each(function() { 
       $(this).css("width", widths[$(this).index()]+5); 
      }); 
      $(div+' #hdr').css("width", totalWidth); 
      $(div+' #bdy').css("width", totalWidth+($(div+' #bdy').css('overflow-y')=='auto'?15:0)); 
     } 
    }) 
});

Nguồn

2014-12-03 15:59:49 AixNPanes

Cách tạo bảng html theo chiều dọc có thể cuộn

Trả lời

Các vấn đề liên quan