Elrejti a táblázat tartalmát sejtek css, web-mester irodájában - létrehozása és fenntartása honlapok

Itt és ott volt egy nagy kihívást jelentő feladat végrehajtásában a felhasználói felület. Van egy asztal. Kezdetben a 3. oszlop. De az oszlopok száma nagyobb lehet. A bal oldali oszlop rögzített szélességű, a jobb oszlopban ismeretlen szélességű és középső hangszóró kell elfoglalni az összes maradék helyet.

Mint bármi bonyolult, és egy szabványos html táblázatok ezt lehet tenni egy perc alatt. De van egy további feltétel. A középső oszlop tartalmazza a szöveget, és a tömörítés a böngésző ablak (mint amilyennek lennie kellene egy sorban) elkezd vágni, és van egy ellipszis.

Természetéből adódóan a tábla nem teszi lehetővé vágja a tartalmat, és mindig szívesen megjeleníteni. Mit kell tenni? Számos módja van, hogy megoldja a problémát. Nézzük meg a legegyszerűbb és leghatékonyabb (véleményem szerint).

Először hozzon létre egy táblázatot három oszlopban. Mi határozza meg az osztályok, írni a tartalmát:

A második doboz I tudatosan csomagolva 2 div-a. De később ezt. Azt viszont, hogy a stílusok:

Mit csináljunk? Röviden: szélességének beállításához az első és az utolsó cella (bár bármi lehet, beleértve a dinamikus), meg a háttér színét (a jobb vizuális észlelés példa), általában nincs semmi érdekes. Nézzük a legérdekesebb darab kód:

Az első esetben mi meg position: relative (a belső alkatrészekhez pozícionálva, hogy - ha lehet beállítani ezt a tulajdonságot, és a cellában, de a Mozilla Firefox nem tudja, hogyan kell csinálni egy cella), min-width: 43px; - minimális szélessége (egyébként teljesen csapja a sejt), magasság: 20 képpont; - magasság.

A második esetben, a következő: white-space: nowrap; - tilalma gépsorok (a szöveg legyen az 1-es vonal), position: absolute; - abszolút helymeghatározás képest a szülő (div), max-szélesség: 100%; - maximális szélesség az elem (használhatja szélesség), overflow: hidden; -, hogy elrejtse a tartalmat, amely túllép a határain elem, text-overflow: ellipszis; - add pontokat a szövegben.

Ez minden :) munkák. A teljes kódot az oldal: