TBODY и CSS

12 отговора 319 прегледа
#1

TBODY и CSS

Имам следната табличка (oпростил съм я за прегледност)

<table>
<tbody>
<tr><td>...</td><tr>
<tr><td>...</td><tr>
</tbody>
<tbody>
<tr><td>...</td><tr>
<tr><td>...</td><tr>
</tbody>
</table>

Искам да си дефинирам бордер който да се появява в долната част на tbody-то (идеята е да обединя в блокве сходната информация от таблицата, като блоковете да ги разделя с бордер). Бордер-а обаче го правя чрез background-image (по обясними причини), по следния начин:

background-image : url(../Images/defaultWebFormBorder.gif);
background-repeat : repeat-x;
background-position : 0% 100%;

IE6 изобщо не реагира, както и Mozilla 1.5, Опера 7 прави някакви напъни, но крайният ефект не е това което искам. Поиграх си малко и с padding-ите и margin-ите, но никакъв ефект.

Когато задам бордера с boder (border-top: 1px solid #7799CC;) Опера-та и Мозила-та си го показват коректно, при при IE-то отнотво няма никакъв бордер.

Основното което ме интересува е, има ли изобщо начин това да се направи с background-image, без да "цапам" HTML-кода с id или class атрибути, и без да използвам примерно TH в последният ред от tbody-то с цел на него да задам бордера(щото изобщо не е заглавна клетка).

Другото което също ме интересува е чрез примерно, border-top: 1px solid #7799CC;, това да се вижда в Експлодера(6), както при Опера и Мозила.

Ами... това е. Надявам се, да съм описал добре проблема...

__________________________________
Пътят към ада е осеян с добри намерения
Отговор
в отговор на ..:: StanProg ::.. #2

Re: TBODY и CSS

Първо оправи затваряшите тагове на "tr".
Доколкото си спомням, от тестове, tbody = tr.
Най-лесно би било да разделиш таблицата на 2 отделни таблици. Някой може да каже, че така се губи логиката, но аз винаги съм бил противник на таблици с повече от един tbody елемент (лично мнение).

Отговор
в отговор на wiz. #3

Re: TBODY и CSS

Мерси за идеята с многото таблици, определено не търся на най-лесното решение, по-скоро гледам кода ми да е семантично правилен и да изнеса пезентацията изцяло в CSS-и. Ако не успея обаче да намеря по-правилно решение, ще го направя с няколко таблици и един DIV контейнер.

__________________________________
Пътят към ада е осеян с добри намерения
Отговор
в отговор на ..:: StanProg ::.. #4

И какви...

са обяснимите причини поради които ползваш background-image?

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.
Отговор
в отговор на ..:: StanProg ::.. #5

Re: TBODY и CSS

Да и аз точно семантика имах предвид.
Въпреки, че би могло да се поспори дали една таблица с няколко tbody е сематично / логически по-правилният вариант, отколкото няколко таблици с корекни summary ,thead и tfoot.
А защо не искаш да сложиш class или id? В смисъл, не виждам как това би попречило на структурата на документа, при положение, че class и id атрибутите не носят семантична / структурна информация за елементите, на които принадлежат?

Отговор
в отговор на Koтapakът нa Шpьoдинrep #6

Re: И какви...

Ами бордер-а ми не е може да се представи чрез което е ида е било border-style property, затова се налага да поолзвам background-image. То и най-елементарното dotted 1px не се визуализира по еднакъв начин от по-известните браузъри. Затова щом бордер-а ми е различен от solid, използвам background-image....
Е има и иключения разбира се... като например dotted 2px... това поне се визуализира 1:1

__________________________________
Пътят към ада е осеян с добри намерения
Отговор
в отговор на wiz. #7

Re: TBODY и CSS

Да ти кажа, не измислих по-смислен вариант от този с няколко таблици, тъкмо ще използвам summery да опиша блока по-точно.
Що се отнася до няколко tbody-та обаче мисля, че не си много прав... в html спецификацията пише:
"Table rows may be grouped into a table head, table foot, and one or more table body sections...", и ми се вижда добре измислено, особено в моя вариант където имам таблица разделена на блокове от редове. Още се чудя обаче, как да се възползвам от това.
Що се касае до class и id, гледам да ги слагам само на контейнерни елементи(или на такива които ще достъпвам с JavaScript) и се опитвам да минимизирам използването им до минимум. То ако човек си е направил добре структурата, почти цялата презентация под контейнерния елемент може да се опише каскадно и то доста добре. Ползвам ги само тогава, когато наистина се налага, а не "на всяко гърне мерудия" (разбирай на всеки линк class - доста често срещано явление)

В крайна сметка ще ползвам няколко таблици, щом не мога да се възползвам от няколкота tbody-та...

__________________________________
Пътят към ада е осеян с добри намерения
Отговор
в отговор на ..:: StanProg ::.. #8

Re: TBODY и CSS

особено в моя вариант където имам таблица разделена на блокове от редове.

В такъв случай смятам (въпреки казаното преди това), че не е правилно да разваляш логическата структура само за да постигнеш проста визуализация.
При положение, че таблицата трябва да е една, но с няколко tbody не е правилно да бъде разделяна с цел презентация.

То ако човек си е направил добре структурата
Лошото е, че много малко хора осъзнават колко важно е това.
Губил съм си часове наред в обяснения, защо да се използва например
"p" елементи а не "div".

Отговор
в отговор на wiz. #9

Re: TBODY и CSS

мда, <tr class="lastBlockRow"> - на реда преди </tbody>

и после с CSS:
.defaultWebForm .lastBlockRow td
{
background : url(../Images/defaultWebFormBlockBorder.gif) repeat-x bottom right;
}

Май това наистина е най-доброто решение, за конкретния случай!

__________________________________
Пътят към ада е осеян с добри намерения
Отговор
в отговор на ..:: StanProg ::.. #10

А solid 1px?

или е задължително да е точки?

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.
Отговор
в отговор на ..:: StanProg ::.. #11

Re: TBODY и CSS

А защо не просто:

.lastBlockRow
{
background : url(../Images/defaultWebFormBlockBorder.gif) repeat-x bottom right;
}

или ".lastBlockRow" е дефиниран за повече от един елемент?

Отговор
в отговор на Koтapakът нa Шpьoдинrep #12

Re: А solid 1px?

да, задължително е да е с точки... поне за този дизайн който съм направил...

__________________________________
Пътят към ада е осеян с добри намерения
Отговор
в отговор на wiz. #13

Re: TBODY и CSS

дефиниран е само за един елемент, но искам да важи само за него...
по-късно най-вероятно ще го използвам и за други и за това се застраховам

__________________________________
Пътят към ада е осеян с добри намерения
Отговор