jAbLoK

Jsou různé způsoby, jak zobrazit výpis tabulkových dat obsahujících textové pole víceméně neomezené délky (typicky nějaký popis).

Pokud netrváme na tom, že je třeba toto pole i ve výpisu zobrazit za každou cenu celé, častým řešením je text oříznout, aby zalamováním na více řádků neprotahoval tabulku na výšku, jako to dělá třeba GMail.

A protože vyznat se ve zdrojovém HTML Gmailu není úplně snadné, potěší návod na http://www.blakems.com/archives/000077.html — opravdu to funguje:

table.cropping { width: 100%; table-layout:fixed; border-top: 5px solid #333; border-collapse: collapse; background: #fff; }
table.cropping td { border-bottom: 1px dashed #333; padding: 0.1em 2em 0.1em 1em; text-overflow:ellipsis; overflow:hidden; }
table.cropping td span { white-space:nowrap; }

<table class=&amp;quot;cropping&amp;quot;>
     <col> <col> <col> <col>
    <thead>
        <tr><th>name</th><th>description</th><th>status</th><th>created</th></tr>
    </thead>
    <tbody>
    <tr> <td class=&amp;quot;name&amp;quot;><span>Name 1</span></td> <td><span>Description comes here, may be quite short</span></td> <td class=&amp;quot;status&amp;quot;><span>OK</span></td> <td><span>1.1.2006 17:30</span></td> </tr>
    <tr> <td class=&amp;quot;name&amp;quot;><span>Name 2</span></td> <td><span>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</span></td> <td class=&amp;quot;status&amp;quot;><span>OK</span></td> <td><span>2.1.2006 11:30</span></td> </tr>
    <tr> <td class=&amp;quot;name&amp;quot;><span>A sample very, very, very long name containing some pseudo-latin words like lorem ipsum dolor sit</span></td> <td><span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span></td> <td class=&amp;quot;status&amp;quot;><span>Failed</span></td> <td><span>1.1.2006 17:30</span></td>
    </tr> <tr> <td class=&amp;quot;name&amp;quot;><span>Blah</span></td> <td><span></span></td> <td class=&amp;quot;status&amp;quot;><span>OK</span></td> <td><span>1.1.2006 17:30</span></td> </tr>
    </tbody>
</table>

Pokud vám to přijde jako notorická samozřejmost, a vůbec máte dojem, že se toho s různými HTML/CSS/JS fígly příliš nadělá, tak pro vás závěr nedávné náborové povídání platí, i když zrovna nepěstujete Javu (jinými slovy, můj zaměstnavatel uvítá schopného webdevelopera, o pracovních podmínkách více v zmiňovaném starším příspěvku na Jabloku, případné životopisy prosím na pavel.kolesnikov zavináč gmail.com).

A pokud je to pro vás potěšující novinka, taky dobře.

Může se stát, že píšete JSP-stránky, používáte JSTL, ale nepamatujete si syntaxi všeho možného a váš editor code-completion JSTL nepodporuje. Pokud vám přitom neustálé prohledávání specifikace nepřijde efektivní, může přijít vhod tento JSTL Cheatsheet — zhuštěná verze specifikace syntaxe JSTL.