header freeze mvc html

Question

without thead how to use header freeze in html mvc ex: without thead i want to freeze tbody first row. tbody first row is the header row........... df ------> i want to freeze the first row.this row should not scroll. df1 df2 df3 df4 df5

Ravishankar N · Answer

Hi Arasaraja D, Try this code "text/css" > /*------------------------------------------------------------------ Table Style ------------------------------------------------------------------ */ table a:link { color: #666; font-weight: bold; text-decoration:none; } table a:visited { color: #999999; font-weight:bold; text-decoration:none; } table a:active, table a:hover { color: #bd5a35; text-decoration:underline; } table { font-family:Arial, Helvetica, sans-serif; color:#666; font-size:12px; background:#eaebec; border:#ccc 1px solid; border-radius:3px; border-collapse:collapse; border-spacing: 0; box-shadow: 0 1px 2px #d1d1d1; } table th { padding:10px 10px 10px 10px; border-top:0; border-bottom:1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #ededed; } table th:first-child { text-align: left; } table tr:first-child th:first-child { border-top-left-radius:3px; border-left: 0; } table tr:first-child th:last-child { border-top-right-radius:3px; } table tr { text-align: center; } table td:first-child { text-align: left; border-left: 0; } table td { padding:10px; border-bottom:1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #fafafa; } table tr:last-child td { border-bottom:0; } table tr:last-child td:first-child { border-bottom-left-radius:3px; } table tr:last-child td:last-child { border-bottom-right-radius:3px; } table tr:hover td { background: #f2f2f2; } table th, table td { width: 160px; } #wrapper { width: 740px; height: 300px; overflow-x: scroll; overflow-y: scroll; } table thead { position:fixed; } "wrapper" > Task Details Firstname Progress Vital Task Create pretty table design 100% Yes Take the dog for a walk 100% Yes Waste half the day on Twitter 20% No Feel inferior after viewing Dribble 80% No Wince at "to do" list 100% Yes Vow to complete personal project 23% yes Procrastinate 80% No "#yep-iit-doesnt-exist" >Hyperlink Example 80% "#inexistent-id" >Another Add below to css table thead { position: fixed; }

Varnaparan D · Answer

@vivek bro my code ex : df ------> i want to freeze the first row.this row should not scroll. df1 df2 df3 df4 df5 first row should be fixed bro; pls try bro

Vivek Kumar · Answer

You can try with :first-child Selector property in CSS https://stackoverflow.com/questions/2197133/select-first-list-in-table-css-first-child https://www.w3schools.com/cssref/sel_firstchild.asp

Vivek Kumar · Answer

Hi Arasaraja, Can you try below link? you have to just play with CSS and you will get what you want http://jsfiddle.net/gc6m0g3L/

Varnaparan D · Answer

@vivek question exactly correct but ur link its not working knw

Vivek Kumar · Answer

Hi, Please have a look to below link for your reference. https://stackoverflow.com/questions/30635274/how-to-make-table-header-fixed-in-html-without-using-thead-tag

Madan Shekar · Answer

.table-fixed thead { width: 97%; } .table-fixed tbody { height: 230px; overflow-y: auto; width: 100%; } .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; } .table-fixed tbody td, .table-fixed thead > tr> th { float: left; border-bottom-width: 0; } Fixed Header Scrolling Table # Name Points 1 Mike Adams 23 2 Holly Galivan 44 3 Mary Shea 86 4 Jim Adams 23 5 Henry Galivan 44 6 Bob Shea 26 7 Andy Parks 56 8 Bob Skelly 96 9 William Defoe 13 10 Will Tripp 16 11 Bill Champion 44 12 Lastly Jane 6 if it help mark as ans

header freeze mvc html

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (7)