← Desenvolvimento

[Tabelas] Como fazer borda complexa?

Lida 2657 vezes

Offline

Freedoom 
Membro
Mensagens 723 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Viva  :D  estou aqui a tentar fazer uma borda complexa numa tabela, vejam este site: http://www.sosdesigners.com/colunas-89.html , queria fazer uma tabela com uma borda complexa tipo essa que está nesse site.
Alguem sabe como posso fazer ?

obrigado
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

1º tens que te ter em atenção que no local onde vai levar os títulos na tabela tens que usar <th> e não <td> (assim podes dar formatação em três partes diferentes da tabela, a própria tabela, as células normais e nas células de títulos, já não me lembro, mas acho que também se pode dar formatção à linhas <tr>).
Usando html do site:

Código: [Seleccione]
<table class="comBordaComplexa">
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th>Coluna 3</th>
</tr>
<tr>
<td>valor 1.1</td>
<td>valor 1.2</td>
<td>valor 1.3</td>
</tr>

<tr>
<td>valor 2.1</td>
<td>valor 2.2</td>
<td>valor 2.3</td>
</tr>
<tr>
<td>valor 3.1</td>
<td>valor 3.2</td>
<td>valor 3.3</td>
</tr>
<tr>
<td>valor 4.1</td>
<td>valor 4.2</td>
<td>valor 4.3</td>
</tr>
</table>


e no css deves colocar:

/* ESTA É A FORMATAÇÃO GERAL DA TABELA */

Código: [Seleccione]
table.comBordaComplexa {
border-collapse: collapse; /* CSS2 */
background: #FFFFF0;
border: dashed red 1px; /* Precedência tem bug no IE */
}

/* ESTA É A FORMATAÇÃO DAS CÉLULAS

table.comBordaComplexa td {
border: 1px dotted blue;
}

/* ESTA É A FORMATAÇÃO DAS CÉLULAS QUE LEVAM O TÍTULO */

table.comBordaComplexa th {
border: 1px solid blue;
border-bottom: 2px solid green;
background: #F0FFF0;
}


Tem atenção que o IE não suporta, por exemplo, bordas com pontos, transforma-os em traços.
Offline

Freedoom 
Membro
Mensagens 723 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

ah alguma maneira de fazer com que o IE suporte?
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

pontos penso que não
Offline

Freedoom 
Membro
Mensagens 723 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

ok obrigado, amanha vou testar a tabela :)
Offline

Jota 
Editor
Mensagens 773 Gostos 0
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

A unica maneira e em vez de usares 1px dotted e usares 2px dotted.
Com dois pixeis os pontos ja se notam melhor no IE.