Autor Zpráva
Petr123
Profil *
#1 · Zasláno: 23. 6. 2005, 20:55:05
Odpovědět Citovat
Pomocí CSS se snažím orámovat tabulku a uvnitř udělat mřížku.

table
{
border:solid 1px black;
}
td.data
{
border:solid 1px gray;
}
td.hlavicka
{
border:solid 1px black;
}

<table>
<tr><td class="hlavicka">....</td>.......
<tr><td class="data">....</td>.......
</table>


Orámování by mělo být černé a mřížka šedivá. V IE se zobrazuje tabulka podle mých představ, ale ve Firefoxu překryje černé orámování tabulky šedivý okraj buňky. Dá se jinak než samostatným nastavením rámování okrajových buněk docílit jednobarené orámování tabulky, pokud mají některé buňky (v mém případě hlavička) jinou barvu orámování než ostatní buňky?

Petr
peta
Profil *
#2 · Zasláno: 23. 6. 2005, 21:16:20
Odpovědět Citovat
Nemuzes pouzit pro hlavicku TH a pro data TD?
Jinak nejake tabulky mam v hrach na www.volny.cz/peter.mlich/hry/hry.htm , ale myslim, ze ramecky sem nemenil, takze ani neklikej.

Muzes zkusit do kazdeho th vepsat jeste div a tomu nastavit ramecek...

Ja si myslim, ze by to melo jit, tak jak to mas, jen v IE by s tim meli byt problemy...
Petr123
Profil *
#3 · Zasláno: 23. 6. 2005, 22:58:41
Odpovědět Citovat
Našel jsem si priority jednotlivých prvků a tím se mi to sice celé objasnilo (TD má vyšší prioritu než TR a to zase než TABLE). Řešení by mohlo být použití například tečkovaného orámování TD, protože to má naopak nižší prioritu než solid. Zafungovalo to ale zajímavým způsobem. Vodorovné čáry se ve Firefoxu tak skutečně zachovaly, ale svislé jsou vykreslené podle nastavení stylu pro TABLE.

TH použít bohužel nemůžu, protože používám DataGrid v asp.NET a ten prostě vygeneruje všude TD.
Leo
Profil
#4 · Zasláno: 23. 6. 2005, 23:13:57
Odpovědět Citovat
"TH použít bohužel nemůžu, protože používám DataGrid v asp.NET a ten prostě vygeneruje všude TD."

No comment :-) , Leo
Petr123
Profil *
#5 · Zasláno: 24. 6. 2005, 10:12:12
Odpovědět Citovat
No comment :-) , Leo

Vždycky jsem si myslel, že to znamená, že se k něčemu nechci vyjadřovat, ale proč se s tím sem svěřuješ, když se Tě na názor v tomto směru nikdo neptal, to nechápu. Snad alespoň víš co je to asp.NET a DataGrid :o)

Použití TH místo TR v tabulce by zpřehlednilo text a hlavně by mohlo, pokud by to prohlížeč zvládnul, umožnit zobrazení hlavičky na každé stránce, třeba při tisku, ale rozhodně nemá vliv na to, co jsem chtěl vyřešit.
Leo
Profil
#6 · Zasláno: 24. 6. 2005, 10:17:44
Odpovědět Citovat
"Snad alespoň víš co je to asp.NET a DataGrid :o)"

Vyjadruji se, protoze chci a muzu. Prave proto, ze vim, co je asp.net a datagrid, Leo
Petr123
Profil *
#7 · Zasláno: 24. 6. 2005, 12:09:30
Odpovědět Citovat
Vyjadruji se

NO COMMENT není vyjádření se, ale jestli jsi si tím ulevil nebo Ti to udělalo radost... Pro ostatní je informační hodnota takového příspěvku nulová, ale asi Ti jde jen o to nechat po sobě někde stopu. :o) Užitečnější by bylo, kdybys přidal i něco navíc ze svého názoru, ale to už by nešlo použít NO COMMENT a o to Ti asi šlo.
Martin
Profil
#8 · Zasláno: 24. 6. 2005, 12:25:11
Odpovědět Citovat
Petr123
A hodnota tvých příspěvků je jaká.......
Myslim, že jis úplně mimo. Vždyť ani neumíš udělal támeček okolo td :) Koukni sem http://www.jakpsatweb.cz/css/border.html
Petr123
Profil *
#9 · Zasláno: 24. 6. 2005, 13:28:07
Odpovědět Citovat
A hodnota tvých příspěvků je jaká.......

Pokud se na něco ptám, tak to samozřejmě má pro ostatní nulovou hodnotu do okamžiku, kdy se najde někdo ochotný a pomůže a pak někdo, kdo má podobný problém. Už jsem to tu jednou psal. Pokud se někomu něco nelíbí, tak tím, že napíše, že se mu to nelíbí nic neřekne. Pokud napíše, že se mu to nelíbí, proč a nejlépe jak by to řešil, tak to má smysl, i kdybych s tím nakonec nesouhlasil. Asi to ale cítíme každý jinak

Martin: K těm rámečkům u TD. Jestli si myslíš to co píšeš o tom, že jsem mimo, a byl bys ochotný poradit, tak budu rád. Zkus mi napsat těch pár řádků kódu, kdy docílím toho, že bude tabulka orámovaná černě a buňky šedě s tím, že šířka rámování bude 1px, bude to fungovat i ve ff a nebudeš speciálně nastavovat rámečky u vnějších buněk.
Plaváček
Profil
#10 · Zasláno: 24. 6. 2005, 14:19:28
Odpovědět Citovat
Co to zkusit takhle nejak?

http://klient.plavacek.net/oramovani-tabulky.html
Petr123
Profil *
#11 · Zasláno: 24. 6. 2005, 16:00:18
Odpovědět Citovat
Plaváček: Děkuju, takové řešení mě napadlo také, ale je tam to vnější dvojité orámování. Jako lepší se mi zdá tečkované (nebo jiné než čára) orámování buňky, nad kterým plný okraj tabulky "vyhraje". Z nějakého důvodu jsou ale plnou čarou všechny svislé čáry podle nastavení v TABLE. To už ale není tak kritické. Hlavní je, že vnější orámování je černé, protože tabulku mám na stejném pozadí, jako bylo vnitřní orámování a u hlavičky a patičky jsem měl také černé orámování. Tím tabulka vypadala ve ff tak, že jí chyběly kusy orámování, protože šedivé splynulo s pozadím.



Ještě k tomu co jsem napsal předtím, vypadnul mi konec věty :o)

, a pak někdo, kdo má podobný problém, to ocení.
Martin
Profil
#12 · Zasláno: 24. 6. 2005, 16:04:26 · Upravil/a: Martin
Odpovědět Citovat
Určitě to půjde i jednodušeji :) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

<head>

<title>Tabulka</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

td {

	border:1px solid gray;

}	

table {

	border:1px solid black;

	border-collapse: collapse;

	width:100%;

}

table > tbody:first-child > tr > td {

	border-top:0

}	

table > tbody:last-child > tr > td {

	border-bottom:0;

}

tr > td:first-child {

border-left:0;

}

tr > td:last-child {

border-right:0;

}

</style>



</head>

<body>

<table>

<tbody>

<tr><td>Ahoj</td><td>Ahoj</td><td>Ahoj</td></tr>

</tbody>

<tbody>

<tr><td>Ahoj</td><td>Ahoj</td><td>Ahoj</td></tr>

<tr><td>Ahoj</td><td>Ahoj</td><td>Ahoj</td></tr>

<tr><td>Ahoj</td><td>Ahoj</td><td>Ahoj</td></tr>

<tr><td>Ahoj</td><td>Ahoj</td><td>Ahoj</td></tr>

</tbody>

<tbody>

<tr><td>Ahoj</td><td>Ahoj</td><td>Ahoj</td></tr>

</tbody>

</table>

</body>

</html>


Opera ale nechápe last-child :)
Plaváček
Profil
#13 · Zasláno: 24. 6. 2005, 18:47:32
Odpovědět Citovat
Taky hezké řešení. Pak existuje ještě obecná rada, kterou se často řídím. Nejde-li něco udělat nebo mě hledání řešení zabírá víc času než jednu hodinu, udělám to nějak jinak. Návštěvník webu stejně nepozná rozdíl a já si ušetřím čas a síly na další dobře honorovanou práci.
Fred
Profil
#14 · Zasláno: 24. 6. 2005, 18:52:32
Odpovědět Citovat
Uf, tak teď už vím proč jsem tak neproduktivní, velmi cenná rada, díky :-)
Petr123
Profil *
#15 · Zasláno: 24. 6. 2005, 20:44:34
Odpovědět Citovat
Nejde-li něco udělat

S tím se nedá než souhlasit. V diskuzích se ale člověk občas dozví zajímavá řešení a proto je vhodné jí dotáhnout do konce, i když už je zvolená jiná varianta.

Řešení Martina je fakt hezký - díky za něj. I když je ve zmíněném DataGridu nerealizovatelné (radši napíšu asi nerealizovatelné :o)), tak v případě nutnosti by se dalo místo DataGridu použít jiné řešení. A alespoň nebudu tak mimo :o)
Martin
Profil
#16 · Zasláno: 24. 6. 2005, 21:17:30 · Upravil/a: Martin
Odpovědět Citovat
Zabralo mi to tak okolo hoďky a v životě bych to nikdy nepoužil :)
Plaváček
Profil
#17 · Zasláno: 24. 6. 2005, 22:29:45 · Upravil/a: Plaváček
Odpovědět Citovat
Nedalo mi to a znovu jsem si prostudoval specifikaci a zjistil jsem, že nám všem unikla jedna podstatná drobnost a to fakt, že prioritu má i styl rámečku. Čili pro orámování tabulky nastavte styl rámečku s nejvyšší prioriotu (respektive druhou nejvyšší - solid) a pro rámeček buňky styl s nižší prioritou (já zvolil inset, protože vypadá všude stejně)

Et voilá.. a už to funguje :)

Viz http://klient.plavacek.net/oramovani-tabulky.html .

Testováno v IE 6, Mozilla 1.6, Opera 7.24.

P.S.
skvělý seriál kdysi napsal Petr Staníček alias Pixy, velmi často do něj nakukuji. Část týkající se tabulek v CSS najdete zde

http://www.webtip.cz/art/wt_tech_html/wt_cssserial_017.html
Petr123
Profil *
#18 · Zasláno: 25. 6. 2005, 00:13:49
Odpovědět Citovat
že nám všem unikla jedna podstatná drobnost

Ne tak zcela, psal jsem o tom, že tečkované orámování buňky to řeší, ale zůstávaly mi svislé čáry podle nastavení tabulky. Protože Tvoje tabulka se zobrazoval správně, tak jsem se díval proč a problém byl v tom, že DataGrid vygeneruje u tagu TABLE atribut rule="all" a ten přebije orámování buňky. Zajímavé je, že nepřebije orámování řádku, u kterého jsem měl nastavené stejné orámování jako u buňky. Výsledkem byly šedé vodorovné čáry a černé svislé čáry.


v životě bych to nikdy nepoužil

Pro orámování tabulky asi ne. Ale ukazuje to možnosti formátování pomocí :first-child a selektorů A>B a to by se mohlo hodit třeba pro podbarvení prvního sloupce tabulky.
Časová prodleva: 13 dní
Martin
Profil
#19 · Zasláno: 8. 7. 2005, 11:10:33
Odpovědět Citovat
Plaváček
Moje řešení je hezčí :)
peta
Profil *
#20 · Zasláno: 10. 7. 2005, 09:24:40
Odpovědět Citovat
Plaváček
"já zvolil inset, protože vypadá všude stejně"
onehda jsem to zkousel, delal jsem cihlicky a musel jsem tento druh ramovani zmenit na solid se 4rmi barvami prave proto, ze to melo vsude jinou barvu. Pouzival jsem tedy outset, ale zkousel jsem i inset, myslim.
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0