Cantos redondos

Front-end
#1

Olá pessoal!
O domingo está a ser bom?
Eu estou adiantando trabalho… e surgiu um problema!!!
Não consigo criar uma tabela cujas células têm cantos redondos :?
Estou usando css e o seguinte código:

<style type="text/css">
table.sample {
	border-width: 1px 1px 1px 1px;
	border-spacing: 2px;
	border-style: outset outset outset outset;
	border-color: gray gray gray gray;
	border-collapse: separate;
	background-color: white;
}
table.sample th {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: inset inset inset inset;
	border-color: gray gray gray gray;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.sample td {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: inset inset inset inset;
	border-color: gray gray gray gray;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}
</style>

<table class="sample">
<tr>
	<th>Header</th>
	<td>Content</td>
</tr>
</table>

Mas os meus cantos nunca aparecem redondos!!!
Obrigada por qq ajuda
Cláudia

#2

tú é portuguesa?

#3

sim :wink:

#4

legal, vc deve ser a 4 portuguesa que conheço só nesta semana.
eu rolei seu sample aqui e ficou tudo quadrado mesmo.
pra ser honesto nunca vi isso em style sheet (sempre vi a galera usando gifs pra isso) mas acho que vc vai conseguir fazer ‘parecer’ redondo certo? vai dar apenas alguma distância nas bordas internas e externas.

não vi nada de errado no seu style-sheet nem no html, então só resta rever mesmo o stylo.

#5

-moz-border-radius
nunca vi essa property.
é html 4 mesmo?
deve ser esse o problema, esse lance não deve funcionar em qq navegador

#6

ai, sei que parece gambiarra, mas até o html 4 não existia forma de se fazer uma tabela com os 4 cantos arredondados, portanto, você pode criar uma imagem de cada canto e, por

colocar nos 4 cantos de um div maior (que comportará a tabela), ou usar celulas reservadas mesmo…

espero ter ajudado

:smiley:

#7

Marcos
mas essa solução (c/ imagens) não se torna um pouco pesada?

Mas porque raio a solução css não funciona?
Eu tirei do site:
http://www.somacon.com/p141.php

Obrigada
Cláudia

#8

Num fica pesada naum!
Vc vai ter apenas quatro pequenas imagens dos cantos e estas serão reaproveitadas em todas as tabelas.

#9

pesado?

não fica não, geralmente, essas imagens terão no máximo 500 bytes cada (em gif ou jpg), e, o browser só baixa uma vez, depois isso fica em cache, e seu carregamento é instantâneo…

é em php, mas aqui vc tem um exemplo de um site antigo que desenvolvi em inicio de carreira:

http://unimestre.unibes.com.br/ibes_antigo/secretaria.ibes

até mais

#10

marcos no menu tb usaste imagens para fazer as pequenas células arredondadas?

Obrigada
Cláudia

#11

Tem um exemplo aqui também -> http://kalsey.com/2003/07/rounded_corners_in_css/

#12

[quote=Claudia.pt]http://www.somacon.com/p141.php
[/quote]

Cláudia, os exemplos no site que tu passaste funcionaram direitinho - só o raios da moz-border-radius é que não funcionou mesmo. Tentei no explorer 6.

EDIT: acho que seria melhor vc usar algum dos exemplos acima mesmo (é mais garantido)

#13

[quote=agodinhost]-moz-border-radius
nunca vi essa property.
é html 4 mesmo?
deve ser esse o problema, esse lance não deve funcionar em qq navegador
[/quote]
As propriedades que começam com “moz” são extensões do mozilla, não funcionam no IE.

#14

O “moz” do “moz-border-radius” quer dizer Mozilla. Ou seja, incompativel com browsers que nao sejam, er, Mozilla-based (Firefox, Seamonkey, Camino, etc).

#15

pois é, vivendo e aprendendo.
também aprendi com isso, valeu galera.

#16

Sim… o prefixo -moz- é isso tudo
Mas o que achei mais estranho é que o meu web browser é o Mozilla Firefox
Mas já não importa… desisti dos cantos redondos
De qq forma obrigada a todos

#17