Como adicionar raio de borda na linha da tabela

Alguém sabe estilizar tr como gostamos?

Eu usei border-collapse na tabela, depois que tr's podem exibir borda sólida de 1px que eu indiquei.

No entanto, quando tentei -moz-border-radius, não funcionou. Mesmo a margem simples não funciona.

Você só pode aplicar border-radius a td, não tr ou table. Eu resolvi isso para tabelas de cantos arredondados usando estes estilos:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

Certifique-se de fornecer todos os prefixos do fornecedor. Aqui está um exemplo disso em ação .

Espaçamento real entre linhas

Este é um tópico antigo, mas percebi ler os comentários do OP em outras respostas que o objetivo original aparentemente era ter border-radiusnas linhas e lacunas entre as linhas. Não parece que as soluções atuais façam exatamente isso. A resposta de theazureshadow está indo na direção certa, mas parece precisar de um pouco mais.

Para os interessados nisso , aqui está um violino que separa as linhas e aplica o raio a cada linha. (NOTA: Atualmente, o Firefox tem um bug na exibição / recorte background-colornos raios da borda .)

O código é o seguinte (e como o zureshadow observou, para suporte de navegador anterior, os vários prefixos de fornecedor para border-radiusnecessidade adicionados).

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

Informação de bônus: border-radiusnão tem efeito em mesas com border-collapse: collapse;e borda definida em td's. E não importa se border-radiusé definido em table, trou td-É ignorado.

http://jsfiddle.net/Exe3g/

O elemento tr honra o raio da borda. Pode usar html puro e css, sem javascript.

Link JSFiddle: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr class='dotted'>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr class='solid'>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr class='dotted'>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr class='dashed'>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>

Acho que derrubar suas fronteiras é a coisa errada a fazer neste caso. Colapsá-los significa basicamente que a fronteira entre duas células vizinhas torna-se compartilhada. Isso significa que não está claro em qual direção ele deve fazer a curva, dado um raio.

Em vez disso, você pode atribuir um raio de borda aos dois cantos esquerdos do primeiro TD e aos dois cantos direitos do último. Você pode usar seletores first-childe last-childconforme sugerido por thezureshadow, mas eles podem ser mal suportados por versões anteriores do IE. Pode ser mais fácil apenas definir classes, como .first-columne .last-columnpara servir a esse propósito.

De acordo com o Opera, o padrão CSS3 não define o uso de border-radiusem TDs. Minha experiência é que o Firefox e o Chrome suportam, mas o Opera não (não sei sobre o IE). A solução alternativa é envolver o conteúdo td em um div e, em seguida, aplicar o border-radiusao div.

Não tentando tirar nenhum crédito aqui, todo o crédito vai para @theazureshadow por sua resposta, mas eu pessoalmente tive que adaptá-lo para uma tabela que tem alguns em <th>vez de <td>para as células da primeira linha.

Só estou postando a versão modificada aqui caso alguns de vocês queiram usar a solução do @theazureshadow, mas como eu, tenho algumas <th>no primeiro <tr>. A classe "reportTable" só deve ser aplicada à própria tabela:

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

table.reportTable tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}   

table.reportTable tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}

Sinta-se à vontade para ajustar os preenchimentos, raios, etc. para atender às suas necessidades. Espero que ajude as pessoas!

Descobri que adicionar border-radius a tabelas, trs e tds não parece funcionar 100% nas versões mais recentes do Chrome, FF e IE. Em vez disso, envolvo a mesa com um div e coloco o raio da borda sobre ela.

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

Se sua mesa não estiver width: 100%, você pode fazer sua embalagem float: left, mas lembre-se de limpá-la.

Use o colapso da borda: separado; e espaçamento entre bordas: 0; mas use apenas border-right e border-bottom para os tds, com border-top aplicado ao th e border-left aplicado apenas a tr td: nth-child (1).

Você pode então aplicar raio de borda aos tds de canto (usando nth-child para encontrá-los)

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

Ou use box-shadow se a tabela tiver recolhido

Todas as respostas são muito longas. A maneira mais fácil de adicionar border radius a um elemento de tabela que aceita border como uma propriedade é criando border radius com overflow: hidden.

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;