table header position fixed
Quote from Phil78 on September 9, 2021, 12:14 pmHi all, I have posted this question in an another post, I would like my neotable header say fixed when I scroll the line.
Luis answered me :
@phil78 although it's quite possible to achieve it using JavaScript, neoTable does not have any included functionality like that.
Sorry!
So I would like to know if someone in this forum as already created this kind of routine ?
Hi all, I have posted this question in an another post, I would like my neotable header say fixed when I scroll the line.
Luis answered me :
@phil78 although it's quite possible to achieve it using JavaScript, neoTable does not have any included functionality like that.
Sorry!
So I would like to know if someone in this forum as already created this kind of routine ?
Quote from luishp on September 10, 2021, 9:49 amHi @phil78, I was taking a look to the included neoTable samples and one of them already shows how to make fixed headers using just CSS. Please take a look at Project > Properties > Styles within the attached sample app.
Regards.
Hi @phil78, I was taking a look to the included neoTable samples and one of them already shows how to make fixed headers using just CSS. Please take a look at Project > Properties > Styles within the attached sample app.
Regards.
Uploaded files:- You need to login to have access to uploads.
Quote from Phil78 on September 10, 2021, 4:25 pmThanks Luis, I had found this style block
but as it causes a shift of the columns of the body I put it in comment. See the sceens bbefore and after.here is my style :
tbody {
display:block;
height:250px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1.2em );
}
/*******/
th{
background:#608DFF;
color:#ffffff;
font-weight:normal
}
tr:nth-child(odd){
background: #dae7f9;
}
tr:nth-child(even){
background: #f0f6fe;
}
td{
padding:1px 5px!important;
}
Thanks Luis, I had found this style block
but as it causes a shift of the columns of the body I put it in comment. See the sceens bbefore and after.
here is my style :
tbody {
display:block;
height:250px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1.2em );
}
/*******/
th{
background:#608DFF;
color:#ffffff;
font-weight:normal
}
tr:nth-child(odd){
background: #dae7f9;
}
tr:nth-child(even){
background: #f0f6fe;
}
td{
padding:1px 5px!important;
}
- You need to login to have access to uploads.
Quote from luishp on September 10, 2021, 7:00 pm@phil78 I think you will have to force the columns with too, so it's not calculated automaticaly. But I think you are very close.
Regards
@phil78 I think you will have to force the columns with too, so it's not calculated automaticaly. But I think you are very close.
Regards
Quote from luishp on September 12, 2021, 11:20 am@phil78 you can use CSS to modify the bs-checkbox class. It's used in select columns.
Regards.
@phil78 you can use CSS to modify the bs-checkbox class. It's used in select columns.
Regards.
Quote from luishp on September 12, 2021, 10:24 pmThank you Luis. But don't you think there is a bug somewhere ?
@phil78 not sure. I have just adapted the original JavaScript library trying to add aditional functionalities but it was never thought to offer fixed headers. Of course everything can be improved. If you are interested, I can share here the plugin source code.
Best regards.
Thank you Luis. But don't you think there is a bug somewhere ?
@phil78 not sure. I have just adapted the original JavaScript library trying to add aditional functionalities but it was never thought to offer fixed headers. Of course everything can be improved. If you are interested, I can share here the plugin source code.
Best regards.