Fórum Root.cz
Hlavní témata => Vývoj => Téma založeno: 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
-
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/)
@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.