Search results
This is the code that works for me to create a sticky thead on a table with a scrollable tbody: table ,tr td{ border:1px solid red } tbody { display:block; height:50px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed;/* even columns width , fix width of table too*/ } thead { width: calc( 100% - 1em )/* scrollbar ...
5 wrz 2024 · Learn how to create an HTML table with a 100% width and a scrollable <tbody>, keeping the headers fixed for improved user experience. When working with large data sets in web development, especially when you're displaying them in tables, one common challenge is how to handle scrolling without losing sight of the table headers.
table { table-layout: fixed; border-collapse: collapse; margin: 0 auto; border: 1px solid #eee; } thead { background-color: #fff; box-shadow: inset 0px -1px 0px #eee, 0px 5px 5px -5px rgba(0,0,0,.1); position: relative; } thead tr { display: block; position: relative; } td:nth-child(1), th:nth-child(1){ min-width: 200px; } td:nth-child(2), th ...
The <tbody> tag is used to group the body content in an HTML table. The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer.
Tennis Bag na Allegro.pl - Zróżnicowany zbiór ofert, najlepsze ceny i promocje. Wejdź i znajdź to, czego szukasz!
2 maj 2022 · 다음과 같이 table 의 tbody 의 max-height 값을 지정해 주고, overflow-y 를 scroll 로 지정해주어 넘는 높이는 스크롤로 볼수있게 해준다. table tbody { display: block; max-height: 100px; overflow-y: scroll; }
The "table tbody{ display:block; overflow: auto; height:200;}" make the tbody scroll but the width get mess. To correct you have to set "table thead{ width: calc(100% - 20px);display: table;}" and set the width for each column.
