jAbLoK

blog už dávno nejen o javě

Gmailoidni "ořezávací" tabulky v HTML

leave a comment »

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.

Written by Pavel Kolesnikov

Březen 8, 2006 na 9:29 am

Zasláno do Tech

Tagged with ,

Napsat komentář

Vyplňte detaily níže nebo klikněte na ikonu pro přihlášení:

WordPress.com Logo

Komentujete pomocí vašeho WordPress.com účtu. Log Out / Změnit )

Twitter picture

Komentujete pomocí vašeho Twitter účtu. Log Out / Změnit )

Facebook photo

Komentujete pomocí vašeho Facebook účtu. Log Out / Změnit )

Google+ photo

Komentujete pomocí vašeho Google+ účtu. Log Out / Změnit )

Připojování k %s

%d bloggers like this: