FIXOVÁNÍ 1: Fixní tabulka před tabulkou scrollovatelnou do šířky

Další dotaz, tentokrát přes chat (najdete ho vpravo dole), se týkal zafixování čtyř sloupců a dvou scrollovatelných do šířky. Tuto vlastnost můžete znát z MS Office, kde se buňky přichytávaly k okraji.

Řešení bylo pomocí první tabulky, která je zafixovaná překrývá tu druhou. Druhá tabulka je pomocí paddingu odsazená vedle té první.

HTML kód (s částí CSS):

<table id="fixni" style="text-align: left; width: 300px; max-height: 200px" border="1">
  <tbody>
    <tr>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text -  8956254564184. Klidně se i zalomí...</td>
      </tdbody>
       </table>
       <table id="druha" style="text-align: left; min-width: 85px; min-height: 190px;" border="1">
   <tdbody>
      <td id="pohyb" style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí</td>
      <td id="pohyb" style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí a může být stráááááááááááááááááááááááááááááááááááááááššššššššššššššněěěěěěěěěěěěěěěě dlouuuuuuuuuuuuuuhýýýýýýýtgrrfewgfzgezfgrfzugvczutfgewbdszfugwhejasgfzuuwgfhcbzwgfcwhegfzš</td>
    </tr>
  </tbody>
</table>

CSS kód: 

    #fixni {
        position: fixed; 
        left: 0; 
        top: 0; 
        background: #8ECCF0; 
        z-index: 1
        
    }
 
    #fixni td {
        max-width: 75px; 
        word-wrap: break-word
    }
    #druha {
        padding-left: 324px;
        margin: -8px;
    }

Živá ukázka pomocí iframe ve stránce

Živá ukázka samotných tabulek (zkuste si zmenšit okno prohlížeče)

Napište komentář!