Likovi sa StackOverflow-a kažu ovako nešto..


css border radius on tr



Ja još uvek nisam probao da se majem sa tabelama i zaobljenim ivicama.
Kako gore piše da se border-radius pravilo može primeniti samo na td elemente, onda ispada da je najbolje i najlogičnije da se oslanjaš na border-collapse:collapse i slike koje imitiraju zaobljene ivice.

ne bih preporucio da se koriste slike za zaobljene ivice, podrska za border-radius je sasvim dovoljna (od trenutnih major browsera jedino IE8 ne podrzava border-radius, inace ja IE6 i IE7 odavno vise ne racunam u major browsere..) da moze da se koristi u danasnje vreme..

evo recimo primer tabele na kojoj sam koristio border-radius da dobijem zaobljene ivice (svuda osim u IE <= 8): http://krcko.net/work/xem/account-types.html (tabela ispod "XEMarkets Account Types" naslova)

Ah.. da se ja pitam ... zašto koristiti tabele ( i internet explorer) uopšte?

Kako god, akibono, ovo bi moglo da bude jako korisno za tebe.
Edit this Fiddle

Taj je link inače od iste osobe koju sam citirao u prethodnoj poruci.

tabele treba koristiti za ono cemu i sluze - za prikaz tabelarnih podataka.

Da. To i jeste namena tih elemenata, međutim, ne mora da bude da su samo tabele pogodne za tabelarne podatke. Jedan od valjanih razloga jeste npr. border-radius.

Ako ideš na mimiku <ul><li> ili <div><span> ili <div><div> onda stil, izgled tabele, jako, jako zanimljiviji može da bude. Maletene nisi ograničen svojstvima kojima bi raspolagao, što sa tabelama, kao što i sam vidiš, jeste slučaj ponekad.

Evo priloženog prostog primera kako lepo može izgledati ul li tabela. :)
Sa vrlo malo css-a i svega ostalog.

Naravno, nemoj da misliš da ja kojim slučajem smatram da ti ne znaš oko toga ili nisi upućen.. :D heh..

Čisto da se podsetimo ponekad, što da ne? :)

To što sam priložio treba da se nađe u sastavu jednog objašnjenja za jedan sistem koji pravim.
Sve što treba, ako bi recimo hteo da prikažem tabelu sa 2 ili 3 ili više različitih kolona,
jeste samo još jedna linija u foreach() delu ili više linija (zavisi od "tabele") i naravno, još par css pravila.

evo ti kod za zaobljenim ivicama:

border-radius: 5px;
-moz-border-radius: 5px; //firefox
-webkit-border-radius: 5px; //chrome, safari
-ms-border-radius: 5px; //IE
-o-border-radius: 5px; //opera


postavi go na tabelu.

....

-o-border-radius ?

-o-border-radius je za Operu.

Sve ove linije se iste, ali za razlicni browseri

Jedno javascript resenje za sve browsere, pa i omrazeni IE:

http://www.curvycorners.net/

A zašta ti je -ms-border-radius? .. za IE .. ?

Momčino, znam koji prefix za šta ide,
poenta je u tome da ti nisi shvatio moje prvo pitanje, to jest čuđenje..

Kada hoćeš da daš border-radius koristiš samo -webkit i -moz (za starije verzije ff-a) pored glavnog pravila.

-ms- i -o- za border-radius - ne postoji.
Možeš i to da stavljaš, ali nema svrhe.

IE9, Opera i ff (preko verzije 4) koriste čisto - border-radius.

Ako misliš da je -o- potrebno za starije verzije opere, varaš se...
Opera tada nije imala tu opciju za zaobljene ivice, kao ni IE a ni ostali.. tada.

Inače, prefix -o- se koristi npr. za:

-o-transform:rotate(-10deg);
kada hoćeš da rotiraš tekst..

-o-transition:background 1s;
kada se igraš sa css animacijama umesto javaskripte

onda imaš
background-image:-o-linear-gradient(left, #fff, #ccc);

kada hoćeš css gradient kao background, a ne gradient sliku...

i tako dalje, i tako dalje....

Dakle, za osnovna najupotrebljavanija css3 pravila,
border-radius i box-shadow... prefix -o- kao i prefix -ms- ..
.. to sam prvi put pročitao od tebe.. na ovoj temi.








_{[Ovu poruku je menjao plus_minus dana 16.01.2012. u 17:55 GMT+1]}