0
Fix Footer for inside Scroll html
Hi Mikro, need yo fix the footer for scroll inside, something wrong or missing
let table := ((select Disciplines where 'Budget Discipline' > 0) order by -'Budget Discipline');
let css := "
<style>
table {
width:100%;
background-color: White;
}
.tableFixHead {
overflow-y: auto;
height: 265px;
}
th {
text-align:center;
background-color: LightGray;
}
td,th{
font-size: small;
padding: .1em .5em .1em .5em;
}
td {
background-color: GhostWhite;
}
tr:nth-child(odd) td{
background-color: White;
}
td:nth-of-type(2) , td:nth-of-type(2), td:nth-of-type(3), td:nth-of-type(4), td:nth-of-type(5), td:nth-of-type(6), td:nth-of-type(7) {
text-align:center;
}
thead {
position: sticky;
top: -.3em;
text-align:center;
}
</style>";
let content := "
<div class='tableFixHead'>
<table>
<thead>
<tr>
<th> Discipline </th>
<th> Weight Budget </th>
<th> Budget Discipline</th>
<th> Plan Value </th>
<th> Eaned Value </th>
<th> Progress Plan </th>
<th> Progress Real </th>
</tr>
</thead>
<tbody>
" +
table.("
<tr>
<td> " +
Discipline +
" </td>
<td> " +
'Weight Budget' +
" </td>
<td> " +
'Budget Discipline' +
" </td>
<td> " +
'Plan Value' +
" </td>
<td style=background-color:" +
switch true do
case 'Earned Value' > 'Plan Value':
"DarkOliveGreen"
case 'Earned Value' < 'Plan Value':
"#d36e70"
case 'Earned Value' = 'Plan Value':
"#ffffc0"
end +
"> " +
'Earned Value' +
" </td>
<td> " +
'Plan Value %' +
" </td>
<td> " +
'Earned Value %' +
" </td>
") +
"
</tbody>
<tfoot>
<tr>
<th style = text-align:left>#<sub>filter </sub> = " +
cnt(table['Budget Discipline' > 0]) +
"</th>
<th style = text-align:center scope='colgroup' colspan='1' >∑<sub>total </sub> = " +
sum(table.'Weight Budget') +
"</th>
<th style = text-align:center scope='colgroup' colspan='1' >∑<sub>total </sub> = " +
sum(table.'Budget Discipline') +
"</th>
<th style = text-align:center scope='colgroup' colspan='1' >∑<sub>toal </sub> = " +
sum(table.'Plan Value') +
"</th>
<th style = text-align:center scope='colgroup' colspan='1' >∑<sub>total </sub> = " +
sum(table.'Earned Value') +
"</th>
<th style = text-align:center scope='colgroup' colspan='2' > " +
"</th>
</tfoot>
</table>
</dic>
";
html(css + content)
3 Antworten
-
Hi Rafael. Try this in css...
thead,tfoot{ position: sticky; font-size:small; } thead { top: -.3em; text-align:center; } tfoot{bottom: -.3em;}
instead of...
thead { position: sticky; top: -.3em; text-align:center; }
Mirko
Content aside
- Status Answered
- vor 4 MonatenZuletzt aktiv
- 3Antworten
- 87Ansichten
-
2
Folge bereits