Responsive táblázat

Címkék
Responsive táblázat
2022-11-14T14:24:07+01:00
2022-11-14T18:39:37+01:00
2022-11-14T18:55:34+01:00
Öregurasan
Segítséget kérnék!

Egy responsive táblázatot szeretnék készíteni (naptár jellegű) ahol owerflow esetén a  függőleges görgetésnél az első sor, vizszíntes görgetésnél az első oszlop fíx. Függőleges esetén a napokat, víszintes esetén az órákat kellene rögzítve megjeleníteni.

googliztam sokat a témában, de használhat megoldást eddig nem találtam

Segítséget előre is köszönöm
Mutasd a teljes hozzászólást!

  • Hali!

    Mutasd – CSS- és/vagy JS-forráskóddal/-részlettel –, hogy eddig mivel, hogyan próbálkoztál, meddig jutottál el, mi nem megy, miben/hol akadtál el!

    Mutasd a teljes hozzászólást!
  • A responsive megjelenítés, működik, de sajnos csak a teljes div re vonatkozóan. Itt szeretném a fent említett oszlop sor rögzítést alkalmazni.
    Korábban, más  esetben, alkalmaztam a táblázat fej, törzs, láb megoldást ott a függőleges görgetés a törszben megoldottam. Úgy érzem ez más jellegű megoldást kíván.

    <!DOCTYPE html>
    <html lang='hu'>
        <meta charset='utf-8'>
    <title>Tablazat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>
      <div class="w3-container">


        <h2>Táblázatom</h2>


        <div class="w3-responsive">
         
          <table class="w3-table-all" border="1">
            <tr>
              <th>Órák</th>
              <th>Hétfő</th>
              <th>Kedd</th>
              <th>Szerda</th>
              <th>Csütörtök</th>
              <th>Péntek</th>
              <th>Szombat</th>
              <th>Vasárnap</th>
              <th>Órák</th>
            </tr>
            <tr>
              <td>7</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>7</td>
            </tr>
            <tr>
              <td>8</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>8</td>
            </tr>
            <tr>
              <td>9</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>9</td>
            </tr>
            <tr>
              <td>10</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>10</td>
            </tr>
            <tr>
              <td>11</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>11</td>
            </tr>
          </table>
        </div>
        <div class="w3-panel">
          <p>Ez itt a lábléc szövege,Ez itt a lábléc szövege,Ez itt a lábléc szövege,Ez itt a lábléc szövege</p>
        </div>
      </div>
    </body>
    </html>

    />
    Mutasd a teljes hozzászólást!
  • Edit fiddle - JSFiddle - Code Playground
    (De jobb lenne tábla helyett grid, mert ez elég kényszerített.)
    Mutasd a teljes hozzászólást!
Címkék
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd