reklama

Zobrazit příspěvky

Tato sekce Vám umožňuje zobrazit všechny příspěvky tohoto uživatele. Prosím uvědomte si, že můžete vidět příspěvky pouze z oblastí Vám přístupných.


Příspěvky - mareolan

Stran: [1]
1
Vývoj / Re:CSS text-overflow: ellipsis v tabulce
« kdy: 09. 07. 2019, 01:40:33 »
V tomto ohledu s tabulkou moc dělat nejde. Pro novější prohlížeče by mohlo jít přestylovat tabulku jako CSS grid - https://jsfiddle.net/e7vgpmdn/1/

Kód: [Vybrat]
@supports (display: grid) {
  table {
    display: block;
  }
  tbody {
    display: grid;
    grid-template-columns: auto minmax(150px, 2fr) minmax(100px, 1fr);
  }
  tr {
    display: contents;
  }
  td {
    border: 1px solid black;
    padding: 5px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

  • ukázka má 3 sloupce, 2. a 3. obsahují dlouhé řetězce; zkracování je ve všech buňkách, ale lze to přenastavit
  • první sloupec má automatickou velikost, druhý má min. 150px, třetí má min. 100px; extra místo se přerozděluje mezi druhý a třetí sloupec v poměru 2:1
  • jestli chceš border, tak si budeš muset vyřešit překrývání (border-collapse: collapse nejde použít) - mělo by jít nastavením top a left borderu na tabulce a pak bottom a right na buňkách
  • CSS selektory (table, tbody, tr, td) si uprav pomocí class, aby sis nepřestyloval všechny tabulky  :)

Pokud bys chtěl zůstat čistě u tabulky bez CSS gridu, tak by to (teoreticky) mohlo jít pomocí starých HTML atributů <td width="30%"> na těch sloupcích, kde to potřebuješ zkracovat, stačí v prvním řádku. Navíc bys ale nejspíš musel do všech zkracovaných buněk dát ještě ~ flex container s flex item-ou, která bude mít šířku 0 (nebo tolik, jaká má být minimální šířka) a pak flex-grow, abys oklamal automatické měření šířky buněk. Nemám vyzkoušeno, očekával bych ale někde nějaký zádrhel ;D.

Stran: [1]

reklama