CSS text-overflow: ellipsis v tabulce

[mhi]

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

[Reklama]

[mareolan]

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 .