Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: mhi 06. 07. 2019, 23:45:49

Název: CSS text-overflow: ellipsis v tabulce
Přispěvatel: mhi 06. 07. 2019, 23:45:49
Nezabyvam se tvorbou webu, tak se omlouvam za mozna zacatecnicky dotaz. Potrebuju udelat HTML tabulku se seznamem nejakych dokladu. Nektere sloupce neni mozne zkratit ani zalomit a maji vcelku fixni podobu (treba datum vzniku dokladu), tam neni problem s pomoci "nowrap". Nicmene je tam par sloupcu, jako treba oznaceni osoby, nebo cislo dokladu (muze byt jen cislo, nebo i treba 50 znaku), pripadne poznamka, a u nich bych rad, aby nedoslo k zalomeni, ale jen zkraceni. Celkove chci, aby kazda polozka byla na jedne nezalomene radce HTML tabulky a nebyl tam scrollbar, lze-li fixni sloupce a kus tech variabilnich umistit na obrazovku.

Na to by melo fungovat text-overflow: ellipsis, ovsem jak se zda ,chodi to pouze pokud jsou definovane fixni rozmery sloupcu. Ja bych ovsem rad nechal prohlizec, aby si to urcil sam (jako u zalamovani) a pak pozkracoval co je potreba aby se to veslo na jednu radku. Cilem je, aby to chodilo stejne funkcne na tabletu, mobilu i PC s malym ci velkym rozlisenim - tedy aby bylo na prohlizeci co tam vyrenderuje. Na kazdem zarizeni pak bude u nekterych sloupcu zkraceni vypadat jinak.

Text mohu pred-zkratit na serveru, nicmene to vubec neresi problem (nevim co dane zarizeni potrebuje). Jedna se sice o interni aplikaci, ale rad bych aby se dala pouzivat lepe nez nyni (kompat staci s poslednimi verzemi prohlizecu FF/Chrome/Android browser).

Resi se to napr. zde, ale "moje" reseni jsem tam nenasel.

https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working
Název: Re:CSS text-overflow: ellipsis v tabulce
Přispěvatel: mareolan 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/ (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;
  }
}


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.