0

I can make the table headers sticky on scroll.

Can I make the table headers sticky on scroll.

let leads := ((select Albums where Format = 1 or Format = 2 or Format = 3 or Format = 4 or Format = 5) order by Name);
html("<!DOCTYPE html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title> Artists & Albums </title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fe;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        .table-container {
            width: 90%;
            margin: auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            padding: 8px;
            text-align: left;
            font-size: 14px;
            cursor: pointer;
        }
        th {
            background-color: #f1f3f7;
            font-weight: bold;
            text-transform: uppercase;
        }
        td {
            border-bottom: 1px solid #e0e0e0;
        }
        tr:hover {
            background-color: #f8f9fa;
        }
        .status {
            padding: 2.2px 45px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 10px;
            display: inline-block;
            color: white;
        }
        .format-1 { background-color: #28a745; }
        .format-2 { background-color: #007bff; }
        .format-3 { background-color: #ffc107; }
        .format-4 { background-color: #dc3545; }
        .format-5 { background-color: #6c757d; }
    </style>
</head>
<body>
    <div class='table-container'>
        <h2> My Collection Albums by Artist </h2>
        <table>
            <thead>
                <tr>
                    <th>Format</th>
                    <th>Artist Name</th>
                    <th>Title Album</th>
                    <th>Tracks</th>
                    <th>Type</th>
                    <th>rym Average</th>
                </tr>
            </thead>
            <tbody>" +
for l in leads do
    let statusClass := switch l.Format do
        case 1:
            "format-1"
        case 2:
            "format-2"
        case 3:
            "format-3"
        case 4:
            "format-4"
        case 5:
            "format-5"
        default:
            ""
        end;
    let recordId := text(raw(l));
    "<tr " +
    ---
    onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    "><span class='status " +
    statusClass +
    "'>" +
    switch l.Format do
    case 1:
        "CD"
    case 2:
        "CD'2"
    case 3:
        "CD'3"
    case 4:
        "CD & DVD"
    case 5:
        "CD's Box Set"
    default:
        "Unknown"
    end +
    "</span></td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Name +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Title +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Tracks +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    if l.Type then text(l.Type) end +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    if l.'rym Average' then
        text(l.'rym Average')
    end +
    "</tr>"
end +
"</tbody>
        </table>
    </div>
</body>
</html>

5 replies

null
    • szormpas
    • 2 wk ago
    • Reported - view

     Hi,

    Find an example below of a sticky table header that you can scroll through:

    html("<head>
<style>
    .pivot-table {
        border-collapse: collapse;
        width: auto;
        table-layout: auto; /* Column width based on content */
        white-space: nowrap; /* Prevent text wrapping */
    }
    .pivot-table th, .pivot-table td {
        border: 1px solid #dddddd;
        text-align: center;
        padding: 8px;
    }
    .pivot-table th {
        background-color: #eeeef1;
        position: sticky;
        top: 0;
        z-index: 2; /* Higher z-index to ensure it's above other elements */
    }
    .pivot-table th:first-child {
        background-color: #eeeef1;
        font-weight: bold;
        position: sticky;
        left: 0;
        z-index: 3; /* Higher z-index to ensure it's always on top */
    }
    .pivot-table td:first-child {
        background-color: #eeeef1;
        font-weight: bold;
        position: sticky;
        left: 0;
        z-index: 1; /* Lower z-index to ensure it's below the first column header */
    }
</style>
</head>
<body>
<div>
<table id='pivotTable' class='pivot-table'>
    <tr>
        <th></th>" +
header +
"
    </tr>" +
body +
"
</table>
</div>
</body>
</html>
    • red_kite
    • 2 wk ago
    • Reported - view

    Quite abstract, so without exampleDB. Try this. Put a new class in CSS

    .tableFixHead {
overflow-y: auto;
height: 100%;
}

    than also in CSS

    thead {
position: sticky;
top: -.3em;  ---> change this according to your needs
}

    than put the table in a container
     

    <aside class='tableFixHead'>
<table>
…
</table>
</aside>
    • Rafael Sanchis
    • Rafael_Sanchis
    • 2 wk ago
    • Reported - view

    Thanks 👍, find the solutions.

    let leads := ((select Albums where Format = 1 or Format = 2 or Format = 3 or Format = 4 or Format = 5) order by Name);
html("<!DOCTYPE html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title> Artists & Albums </title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fe;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        .table-container {
            width: 90%;
            margin: auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            height: 38vh; /* Altura fija para el contenedor */
            display: flex;
            flex-direction: column;
        }
        h2 {
            color: #333;
            margin-bottom: 15px;
        }
        .table-scroll {
        overflow-y: auto;
        flex-grow: 1;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        thead th{
            position: sticky;
            top: 0;
            background-color: #f1f3f7;
            z-index: 2;
        }
        th, td {
            padding: 8px;
            text-align: left;
            font-size: 14px;
            cursor: pointer;
        }
        th {
            font-weight: bold;
            text-transform: uppercase;
        }
        td {
            border-bottom: 1px solid #e0e0e0;
        }
        tr:hover {
            background-color: #f8f9fa;
        }
        .status {
            padding: 2.2px 45px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 10px;
            display: inline-block;
            color: white;
        }
        .format-1 { background-color: #28a745; }
        .format-2 { background-color: #007bff; }
        .format-3 { background-color: #ffc107; }
        .format-4 { background-color: #dc3545; }
        .format-5 { background-color: #6c757d; }
    </style>
</head>
<body>
    <div class='table-container'>
        <h2> My Collection Albums by Artist </h2>
        <div class='table-scroll'>
        <table>
            <thead>
                <tr>
                    <th>Format</th>
                    <th>Artist Name</th>
                    <th>Title Album</th>
                    <th>Tracks</th>
                    <th>Type</th>
                    <th>rym Average</th>
                    <th> BarCode</th>
                </tr>
            </thead>
            <tbody>" +
for l in leads do
    let statusClass := switch l.Format do
        case 1:
            "format-1"
        case 2:
            "format-2"
        case 3:
            "format-3"
        case 4:
            "format-4"
        case 5:
            "format-5"
        default:
            ""
        end;
    let recordId := text(raw(l));
    "<tr " +
    ---
        onclick = ui.popupRecord('{ recordId }')"
    --- +
    ">
        <td " +
    ---
        onclick = ui.popupRecord('{ recordId }')"
    --- +
    "><span class='status " +
    statusClass +
    "'>" +
    switch l.Format do
    case 1:
        "CD"
    case 2:
        "CD'2"
    case 3:
        "CD'3"
    case 4:
        "CD & DVD"
    case 5:
        "CD's Box Set"
    default:
        "Unknown"
    end +
    "</span></td>
        <td " +
    ---
        onclick = ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Name +
    "</td>
        <td " +
    ---
        onclick = ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Title +
    "</td>
        <td " +
    ---
        onclick = ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Tracks +
    "</td>
        <td " +
    ---
        onclick = ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    text(l.Type) +
    "</td>
        <td " +
    ---
        onclick=  ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    text(l.'rym Average') +
    "</td>
        <td " +
    ---
        onclick = ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    text(l.BarCode) +
    "</td>
    </tr>"
end +
"</tbody>
        </table>
    </div>
   </div>
</body>
</html>
    • Rafael Sanchis
    • Rafael_Sanchis
    • 2 wk ago
    • Reported - view
    XRecorder_20250225_01
    • Rafael Sanchis
    • Rafael_Sanchis
    • 2 wk ago
    • Reported - view

    In another DB with footer Total's The IA help a lot.

Login to reply

Content aside

Categories

View all topics
  • Status Answered
  • 2 wk agoLast active
  • 5Replies
  • 85Views
  • 3 Following