Apenas os css arredondados dos cantos da mesa
Cantos arredondados para as células dos cantos, e 1px
contorno grosso para as células.
table {
-moz-border-radius: 5px !important;
border-collapse: collapse !important;
border: none !important;
}
table th,
table td {
border: none !important
}
table th:first-child {
-moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
-moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
-moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
-moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
background-color: #ddd !important
}
Mas isso deixa-me sem fronteiras para as celas. Se eu adicionar fronteiras, elas não são arredondado!
alguma solução?
15 answers
Parece funcionar bem em FF e cromado (não testei outros) com fronteiras separadas: http://jsfiddle.net/7veZQ/3/
Editar: aqui está uma implementação relativamente limpa do seu esboço:
table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
-moz-border-radius:6px;
}
td, th {
border-left:solid black 1px;
border-top:solid black 1px;
}
th {
background-color: blue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}
<table>
<thead>
<tr>
<th>blah</th>
<th>fwee</th>
<th>spoon</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
</table>
Primeiro, você vai precisar de mais do que apenas {[[2]} Se você quiser apoiar todos os navegadores. Deve especificar todas as variantes, incluindo plain border-radius
, do seguinte modo:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
Em segundo lugar, para responder directamente à sua pergunta, border-radius
realmente não mostra uma fronteira; ele apenas define como os cantos parecem da fronteira, se há um.
Para virar na fronteira, e assim obter os cantos arredondados, você também precisa do atributo border
em seus elementos td
e th
.
td, th {
border:solid black 1px;
}
Tu também irá ver os cantos arredondados se você tem uma cor de fundo (ou gráfico), embora é claro que teria de ser uma cor de fundo diferente do elemento circundante, a fim de que os cantos arredondados sejam visíveis sem um contorno.
Vale a pena notar que alguns navegadores mais velhos não gostam de colocarborder-radius
em mesas/células de mesa. Pode valer a pena colocar um {[[9]} dentro de cada célula e estilo em vez disso. No entanto, isso não deve afetar as versões atuais de quaisquer navegadores (exceto IE, isso não suporta cantos arredondados em todos - Veja abaixo)
Finalmente, não que o IE não suporte border-radius
de todo (IE9 beta faz, mas a maioria dos utilizadores do IE estará no IE8 ou menos). Se quiser hackear o IE para suportar o raio de fronteira, olhe para http://css3pie.com/
[editar]
Isto estava a incomodar-me, por isso fiz alguns testes.Aqui está um exemplo JSFiddle com o qual tenho estado a brincar.
Parece que a coisa crítica que te faltava era ...border-collapse:separate;
no elemento da tabela. Isso impede as células de ligar suas fronteiras juntas, o que lhes permite pegar o raio de fronteira.
Espero que isso ajude.
CSS / HTML:
table {
border: 1px solid #ddd;
border-collapse: separate;
border-left: 0;
border-radius: 4px;
border-spacing: 0px;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
border-collapse: separate;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
th, td {
padding: 5px 4px 6px 4px;
text-align: left;
vertical-align: top;
border-left: 1px solid #ddd;
}
td {
border-top: 1px solid #ddd;
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
border-radius: 0 0 0 4px;
}
<table>
<thead>
<tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
</thead>
<tbody>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
</tbody>
</table>
Através da expeirence pessoal descobri que não é possível arredondar cantos de uma tabela HTML célula com CSS puro. É possível contornar a fronteira externa de uma mesa.
Terá de recorrer à utilização de imagens como descrito em este tutorial, ou qualquer outra semelhante :)
A melhor solução que encontrei para cantos arredondados e outro comportamento CSS3 para IE http://css3pie.com/
Descarregue o 'plugin', copie para uma pasta na sua estrutura de soluções. Em seguida, em sua stylesheet certifique-se de ter a etiqueta de comportamento para que ele desliga o plug-in.
Um exemplo simples do meu projecto que me dá cantos arredondados, gradiente de cores e sombra de caixa para a minha tabela:
.table-canvas
{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow:hidden;
border-radius: 10px;
-pie-background: linear-gradient(#ece9d8, #E5ECD8);
box-shadow: #666 0px 2px 3px;
behavior: url(Include/PIE.htc);
overflow: hidden;
}
Não se preocupe se o seu estúdio visual CSS o intellisense dá-te o sublinhado verde para os próprios desconhecidos, ainda funciona quando o Geres. Alguns dos elementos não estão muito claramente documentados, mas os exemplos são muito bons, especialmente na primeira página.
Para obter as melhores cantos, defina o limite de raio, na primeira e última do tipo de th de elementos de e, em seguida, concluir pela definição da fronteira raio no último e primeiro de td escreva sobre o último do tipo tr para obter os cantos inferiores.
th:first-of-type {
border-top-left-radius: 10px;
}
th:last-of-type {
border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
border-bottom-right-radius: 10px;
}
Para uma tabela delimitada e controlável, use isto (substituir variáveis, $
textos iniciais)
Se utilizar thead
, tfoot
ou th
, apenas substitua tr:first-child
e tr-last-child
e {[8] } por eles.
#table-wrap {
border: $border solid $color-border;
border-radius: $border-radius;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }
HTML:
<div id=table-wrap>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
CSS:
table {
border: 1px solid black;
border-radius: 10px;
border-collapse: collapse;
overflow: hidden;
}
td {
padding: 0.5em 1em;
border: 1px solid black;
}
Pode tentar isto se quiser os cantos arredondados de cada lado da tabela sem tocar nas células: http://jsfiddle.net/7veZQ/3983/
<table>
<tr class="first-line"><td>A</td><td>B</td></tr>
<tr class="last-line"><td>C</td><td>D</td></tr>
</table>
Amostra de HTML
<table class="round-corner" aria-describedby="caption">
<caption id="caption">Table with rounded corners</caption>
<thead>
<tr>
<th scope="col">Head1</th>
<th scope="col">Head2</th>
<th scope="col">Head3</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="rowgroup">tbody1 row1</td>
<td scope="rowgroup">tbody1 row1</td>
<td scope="rowgroup">tbody1 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody1 row2</td>
<td scope="rowgroup">tbody1 row2</td>
<td scope="rowgroup">tbody1 row2</td>
</tr>
</tbody>
<tbody>
<tr>
<td scope="rowgroup">tbody2 row1</td>
<td scope="rowgroup">tbody2 row1</td>
<td scope="rowgroup">tbody2 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody2 row2</td>
<td scope="rowgroup">tbody2 row2</td>
<td scope="rowgroup">tbody2 row2</td>
</tr>
</tbody>
<tbody>
<tr>
<td scope="rowgroup">tbody3 row1</td>
<td scope="rowgroup">tbody3 row1</td>
<td scope="rowgroup">tbody3 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody3 row2</td>
<td scope="rowgroup">tbody3 row2</td>
<td scope="rowgroup">tbody3 row2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td scope="col">Foot</td>
<td scope="col">Foot</td>
<td scope="col">Foot</td>
</tr>
</tfoot>
</table>
SCSS, facilmente convertido em CSS, use sassmeister.com
// General CSS
table,
th,
td {
border: 1px solid #000;
padding: 8px 12px;
}
.round-corner {
border-collapse: collapse;
border-style: hidden;
box-shadow: 0 0 0 1px #000; // fake "border"
border-radius: 4px;
// Maybe there's no THEAD after the caption?
caption + tbody {
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tbody:first-child {
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tbody:last-child {
tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: 4px;
}
td:last-child,
th:last-child {
border-bottom-right-radius: 4px;
border-right: none;
}
}
}
thead {
tr:last-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tfoot {
tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: 4px;
}
td:last-child,
th:last-child {
border-bottom-right-radius: 4px;
border-right: none;
}
}
}
// Reset tables inside table
table tr th,
table tr td {
border-radius: 0;
}
}
O seguinte é algo que eu usei que funcionou para mim através de navegadores por isso espero que ajude alguém no futuro:
#contentblock th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
behavior: url(/images/border-radius.htc);
border-radius: 6px 0 0 0;
}
#contentblock th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
behavior: url(/images/border-radius.htc);
border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
border-radius: 0 0 6px 0;
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
behavior: url(/images/border-radius.htc);
border-radius: 0 0 6px 0;
}
#contentblock tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
behavior: url(/images/border-radius.htc);
border-radius: 0 0 0 6px;
}
Obviamente a parte #contentblock
pode ser substituída/editada conforme necessário e poderá encontrar o ficheiro {[[2]} fazendo uma pesquisa no Google ou no seu navegador web favorito.
Este é css3
, apenas o navegador recente non-IE
Confira aqui , deriva a propriedade redonda para todos os navegadores disponíveis
Adicionar entre <head>
Marcas:
<style>
td {background: #ffddaa; width: 20%;}
</style>
E no corpo:
<div style="background: black; border-radius: 12px;">
<table width="100%" style="cell-spacing: 1px;">
<tr>
<td style="border-top-left-radius: 10px;">
Noordwest
</td>
<td> </td>
<td>Noord</td>
<td> </td>
<td style="border-top-right-radius: 10px;">
Noordoost
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>West</td>
<td> </td>
<td>Centrum</td>
<td> </td>
<td>Oost</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-bottom-left-radius: 10px;">
Zuidwest
</td>
<td> </td>
<td>Zuid</td>
<td> </td>
<td style="border-bottom-right-radius: 10px;">
Zuidoost
</td>
</tr>
</table>
</div>
A cor, o conteúdo e a formatação das células são, obviamente, por exemplo;
trata-se de espaçar células coloridas dentro de um div.
Ao fazê-lo, os contornos das células pretas/contornos da tabela são na verdade a cor de fundo do div.
Lembre-se que terá de definir o raio-contorno do div cerca de 2 valores superiores aos raios de contorno do canto das células separados, para ter um efeito arredondado suave no canto.
Lição nas fronteiras da mesa...
Nota: o código HTML/CSS abaixo deve ser visto apenas em IE. O código não será renderizado corretamente no Chrome!
Temos de nos lembrar disso.Uma tabela tem uma fronteira: a sua fronteira externa (que também pode ter um raio de fronteira.)
As próprias células também têm fronteiras (que também podem ter um raio de fronteira.)
-
A mesa e os limites das células podem interferir uns com os outros.:
O contorno da célula pode atravessar o contorno da tabela (ie: contorno da tabela).
Para ver este efeito, altere as regras de estilo CSS no código abaixo do seguinte modo:
I. tabela {contorno-colapso: separado;}
II. apague as regras de estilo que rodam as células de Canto da mesa.
III. em seguida, jogar com o espaço de fronteira para que você possa ver a interferência. No entanto, os limites da tabela e das células podem ser colapsados (usando: contorno-colapso: recolher;).
-
Quando eles são colapsados, as fronteiras da célula e da mesa interferem de uma maneira diferente:
I. Se o contorno da tabela é arredondado, mas os contorno das células permanecem quadrados, então a forma da célula tem precedência e a tabela perde os seus cantos curvados.
Por outro lado, se a célula do canto é curva, mas o limite da tabela é quadrado, então você verá um canto quadrado feio que faz fronteira com a curvatura das células do canto. -
Dado que a célula o atributo tem precedência, a maneira de contornar os quatro cantos da mesa, então, é por:
I. colapsar as fronteiras sobre a mesa (usando: border-collapse: collapse;).
II. definir a curvatura desejada nas células de Canto da tabela.
III. não importa se o canto da tabela é arredondado (ou seja: seu raio de fronteira pode ser zero).
.zui-table-rounded {
border: 2px solid blue;
/*border-radius: 20px;*/
border-collapse: collapse;
border-spacing: 0px;
}
.zui-table-rounded thead th:first-child {
border-radius: 30px 0 0 0;
}
.zui-table-rounded thead th:last-child {
border-radius: 0 10px 0 0;
}
.zui-table-rounded tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
.zui-table-rounded tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
.zui-table-rounded thead th {
background-color: #CFAD70;
}
.zui-table-rounded tbody td {
border-top: solid 1px #957030;
background-color: #EED592;
}
<table class="zui-table-rounded">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
Adicione uma embalagem <div>
à volta da mesa e aplique o seguinte CSS
border-radius: x px;
overflow: hidden;
display: inline-block;
Para esta embalagem.