Cách tạo bảng có tiêu đề cố định và nội dung cuộn được – chiều cao bảng html cố định

Bởi

Trong hướng dẫn này, hãy tìm một số phương pháp tạo bảng HTML với tiêu đề cố định và nội dung có thể cuộn. Ở đây, chúng tôi đề xuất sử dụng một số phương pháp. Xem các ví dụ.

Bạn đang xem : Chiều cao bảng html đã cố định

Giải pháp với Thuộc tính CSS

Trong hướng dẫn này, hãy tìm một số phương pháp tạo HTML table , có tiêu đề cố định và nội dung có thể cuộn. Tất nhiên, bạn cần sử dụng CSS .

Có thể đạt được kết quả như vậy bằng cách đặt thuộc tính position thành “cố định” và chỉ định 0 làm giá trị của thuộc tính top cho & lt ; phần tử thứ & gt; .

Ví dụ về cách tạo bảng có nội dung có thể cuộn bằng cách sử dụng thuộc tính position: 

 

 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
. tableFixHead 
 {
        
 tràn-y 
: auto;
        
 height 
: 
 106px 
;
      }
      
. tableFixHead 
 
 thead 
 
 th  {
        
 vị trí 
: dính;
        
 top 
: 
 0 
;
      }
      
 bảng 
 {
        
 border-sập 
: sập;
        
 width 
: 
 100% 
;
      }
      
 th 
,
      
 td 
 {
        
 padding 
: 
 8px 
 
 16px 
;
        
 border 
: 
 1px 
 solid 
 # ccc 
;
      }
      
 th 
 {
        
 background 
: 
 # eee 
;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 div 
 
 class 
 = 
" tableFixHead "
 & gt; 

      
 & lt; 
 bảng 
 & gt; 

        
 & lt; 
 thead 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 th 
 & gt; 
 Col ​​1 
 & lt; / 
 th 
 & gt; 

            
 & lt; 
 th 
 & gt; 
 Col ​​2 
 & lt; / 
 th 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

        
 & lt; / 
 cái 
 & gt; 

        
 & lt; 
 tbody 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.1 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.1 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.2 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.2 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.3 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.3 
 & lt; / 
 td 
 & gt; 

          
 & lt; /
 tr 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.4 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.4 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.5 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.5 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

        
 & lt; / 
 tbody 
 & gt; 

      
 & lt; / 
 bảng 
 & gt; 

    
 & lt; / 
 div 
 & gt; 

  
 & lt; / 
 body 
 & gt; 


 & lt; / 
 html 
 & gt;


Hãy tự mình thử »

Kết quả

Col 1
Col 2

1.1
2.1

1,2
2,2

1,3
2.3

1,4
2,4

1,5
2,5

Hãy xem một phương pháp khác để tạo bảng có tiêu đề cố định và nội dung có thể cuộn. Trong ví dụ dưới đây, chúng tôi đặt display thành “block” cho phần tử & lt; tbody & gt; để có thể áp dụng height và tràn thuộc tính.

Ví dụ về cách tạo bảng với phần nội dung có thể cuộn bằng cách sử dụng thuộc tính display: 

 

 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
. fixed_header 
 {
        
 width 
: 
 400px 
;
        
 bố cục bảng 
: fixed;
        
 border-sập 
: sập;
      }
      
. fixed_header 
 
 tbody 
 {
        
 display 
: block;
        
 width 
: 
 100% 
;
        
 tràn 
: auto;
        
 height 
: 
 100px 
;
      }
      
. fixed_header 
 
 thead 
 
 tr  {
        
 display 
: block;
      }
      
. fixed_header 
 
 thead 
 {
        
 background 
: black;
        
 color 
: 
 # fff 
;
      }
      
. fixed_header 
 
 th 
,
      
. fixed_header 
 
 td 
 {
        
 padding 
: 
 5px 
;
        
 text-align 
: left;
        
 width 
: 
 200px 
;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 bảng 
 
 class 
 = 
" fixed_header "
 & gt; 

      
 & lt; 
 thead 
 & gt; 

        
 & lt; 
 tr 
 & gt; 

          
 & lt; 
 th 
 & gt; 
 Col ​​1 
 & lt; / 
 th 
 & gt; 

          
 & lt; 
 th 
 & gt; 
 Col ​​2 
 & lt; / 
 th 
 & gt; 

          
 & lt; 
 th 
 & gt; 
 Col ​​3
 & lt; / 
 th 
 & gt; 

        
 & lt; / 
 tr 
 & gt; 

      
 & lt; / 
 cái 
 & gt; 

      
 & lt; 
 tbody 
 & gt; 

        
 & lt; 
 tr 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

        
 & lt; / 
 tr 
 & gt; 

        
 & lt; 
 tr 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

        
 & lt; / 
 tr 
 & gt; 

        
 & lt; 
 tr 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

        
 & lt; / 
 tr 
 & gt; 

        
 & lt; 
 tr 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

        
 & lt; / 
 tr 
 & gt; 

        
 & lt; 
 tr 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

          
 & lt; 
 td 
 & gt; 
 Văn bản 
 & lt; / 
 td 
 & gt; 

        
 & lt; / 
 tr 
 & gt; 

      
 & lt; / 
 tbody 
 & gt; 

    
 & lt; / 
 bảng 
 & gt; 

  
 & lt; / 
 body 
 & gt; 


 & lt; / 
 html 
 & gt;


Hãy tự mình thử »

Như bạn đã nhận thấy, trong các ví dụ trước, chúng tôi không sử dụng đường viền. Tuy nhiên, nếu cần thêm đường viền, bạn có thể đặt chúng bằng thuộc tính box-shadow .

Ví dụ về cách tạo bảng với phần thân có thể cuộn: 

 

 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
. tableFixHead 
 {
        
 tràn-y 
: auto;
        
 height 
: 
 100px 
;
      }
      
. tableFixHead 
 
 thead 
 
 th  {
        
 vị trí 
: dính;
        
 top 
: 
 0 
;
      }
      
 bảng 
 {
        
 border-sập 
: sập;
        
 width 
: 
 100% 
;
      }
      
 th 
,
      
 td 
 {
        
 padding 
: 
 8px 
 
 16px 
;
      }
      
 th 
 {
        
 background 
: 
 # eee 
;
      }
      
. tableFixHead 
,
      
. tableFixHead 
 
 td 
 {
        
 box-shadow 
: inset 
 1px 
 - 
 1px 
 
 # 000 
;
      }
      
. tableFixHead 
 
 th 
 {
        
 box-shadow 
: inset 
 1px 
 
 1px 
 < p class = "hljs-number"> # 000 
, 
 0 
 
 1px 
 
 # 000 
;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 div 
 
 class 
 = 
" tableFixHead "
 & gt; 

      
 & lt; 
 bảng 
 & gt; 

        
 & lt; 
 thead 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 th 
 & gt; 
 Col ​​1 
 & lt; / 
 th 
 & gt; 

            
 & lt; 
 th 
 & gt; 
 Col ​​2 
 & lt; / 
 th 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

        
 & lt; / 
 cái 
 & gt; 

        
 & lt; 
 tbody 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.1 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.1 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.2 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.2 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.3 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.3 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

          
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.4 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.4 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 
 & lt; 
 tr 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 1.5 
 & lt; / 
 td 
 & gt; 

            
 & lt; 
 td 
 & gt; 
 2.5 
 & lt; / 
 td 
 & gt; 

          
 & lt; / 
 tr 
 & gt; 

        
 & lt; / 
 tbody 
 & gt; 

      
 & lt; / 
 bảng 
 & gt; 

    
 & lt; / 
 div 
 & gt; 

  
 & lt; / 
 body 
 & gt; 


 & lt; / 
 html 
 & gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề chiều cao bảng html cố định

HTML Table width and height Attribute | How to change HTML Table Width and Height – HTML Tutorial 60

  • Tác giả: Chidre’sTechTutorials
  • Ngày đăng: 2016-06-12
  • Đánh giá: 4 ⭐ ( 2350 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this HTML tutorial we understand HTML table width attribute and HTML table height attribute. We understand How to change HTML table width and height.

    =========================================

    In the next HTML tutorial you understand the purpose of HTML align attribute and HTML valign attribute. You understand how to use align and valign attribute to align the content of an HTML table cell.
    Follow the link for next video: https://youtu.be/B_OFz9i-RHA

    In the previous HTML tutorial you understand HTML table bgcolor attribute. You understand How to change background color of an HTML table, How to change background color of a row in an HTML table, How to change background color of a cell in a row of an HTML table etc.
    Follow the link for previous video: https://youtu.be/Ze7Ve2bRf5Y

    =========================================

    HTML Tutorials Playlist:
    – https://www.youtube.com/playlist?list=PLdE8ESr9Th_uUR1vA9h-AP4uyzZXb0lqA

    =========================================
    Watch My Other Useful Tutorials:-

    CSS Tutorials Playlist:
    https://www.youtube.com/playlist?list=PLdE8ESr9Th_vdJ6wbXrZh6Ppra7IOf8fF

    JavaScript Tutorials Playlist:
    https://www.youtube.com/playlist?list=PLdE8ESr9Th_seeZTebEFavp257vds9ph5

    jQuery Tutorials Playlist:
    https://www.youtube.com/playlist?list=PLdE8ESr9Th_vu5OoXCwcHsudbR7qw82uU

    =========================================

    HI, I am Manjunath Chidre and I’m an Indian born. I make video tutorials on Computer Science, Information Technology, Animation, VFX, Multimedia, & Gaming courses. Essentially, I set my goal to help students around the world; to learn at free of cost; through my educational YouTube channel Chidre’sTechTutorials.

    =========================================

    Every video on my channel is made with Love and Hard work, So don’t forget to Like, Comment & Share.
    Please do Subscribe, Hit the bell icon & Enjoy Learning. It’s FREE.

    =========================================

    Subscribe to our YouTube channel:-
    https://www.youtube.com/chidrestechtutorials

    Join as member of our YouTube channel:-
    https://www.youtube.com/chidrestechtutorials/join

    Visit our Website:-
    https://www.chidrestechtutorials.com

    Download our Notes from Instamojo:-
    https://chidrestechtutorials.myinstamojo.com

    Become our Patron:-
    https://www.patreon.com/chidrestechtutorials

    Buy our Products on Spring:-
    https://chidres-tech-tutorials.creator-spring.com

    =========================================
    Follow Us:-

    Google My Business:-
    https://chidrestechtutorials.business.site

    Google Blog:-
    http://manjunathchidre.blogspot.com

    LinkedIn:-
    https://www.linkedin.com/company/chidrestechtutorials

    Facebook:-
    https://www.facebook.com/groups/chidrestechtutorials

    Twitter:-
    https://twitter.com/ManjunathChidre

    Tumblr:-
    https://chidrestechtutorials.tumblr.com

    Pinterest:-
    https://in.pinterest.com/chidrestechtutorials

    =========================================

    Despite my inconsistent uploads; Thanks for being amazing learners and still sticking with me on YouTube.

    =========================================
    Hash Tags:-
    ChidresTechTutorials HTML HTMLTutorial

Bảng HTML có tiêu đề cố định?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2404 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Tôi đã tìm kiếm một giải pháp cho việc này trong một thời gian và thấy…

Cách Tạo Bảng Đẹp Trong Html Mới Nhất 2020, Cách Tạo Bảng (Table) Trong Html

  • Tác giả: ruby-forum.org
  • Đánh giá: 4 ⭐ ( 1857 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: “Hãy hòa nhã với những kẻ dở hơi, Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy

Mách bạn những cách cố định footer ở cuối trang web trong CSS – TICHCHU.COM

  • Tác giả: tichchu.com
  • Đánh giá: 3 ⭐ ( 9553 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo Top menu cố định khi cuộn trang bằng CSS và HTML

  • Tác giả: megacode.vn
  • Đánh giá: 4 ⭐ ( 9056 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này tôi sẽ hướng dẫn bạn tạo Top menu dạng Tabbed cố định trên trang, khi chiều cao dữ liệu của bạn nhiều hơn chiều cao màn hình thì…

[CSS] Thuộc tính chiều cao (height) và chiều rộng (width) trong CSS

  • Tác giả: cuongquach.com
  • Đánh giá: 4 ⭐ ( 4688 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ cùng tìm hiểu về giá trị cơ bản dùng để quy định thuộc tính về chiều cao (height) và chiều rộng (width) của phần tử HTML. Hai giá trị cơ bản này thường được dùng nhiều khi bạn thiết kế CSS Layout, qua đó bạn cần thiết lập các tinh chỉnh về cách hiển thị theo kích thước phần tử mong muốn.

Đổi kích cỡ một bảng, cột hoặc hàng

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 1614 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đổi kích cỡ độ cao của hàng bảng hoặc độ rộng cột theo cách thủ công hoặc đặt sau đó để điều chỉnh tự động.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Những ngôn ngữ lập trình nào phổ biến nhất năm 2022 - ngôn ngữ lập trình phổ biến nhất