1

Tenho o seguinte código:

table {
  border-collapse: collapse;
}

.item1, .item2, .item3 {
  border-top:1pt solid black;
  border-bottom:1pt solid black;
}
.item1 {
  border-left:1pt solid black;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.item3 {
  border-right:1pt solid black;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
<table>
  <tr>
   <td>I</td>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
    <td>K</td>
  </tr>
  <tr>
   <td>X</td>
    <td class="item1">A</td>
    <td class="item2">B</td>
    <td class="item3">C</td>
    <td>Y</td>
  </tr>
    <tr>
   <td>I</td>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
    <td>K</td>
  </tr>
</table>

Resultado obtido:
inserir a descrição da imagem aqui

Resultado desejado:
inserir a descrição da imagem aqui

Perceba que minha tabela usa border-collapse: collapse o que tem impedido de deixar as bordas arredondadas com border radius. Como posso resolver esse problema?

1 Resposta 1

2

Utilize border-spacing:0 ao invés de border-collapse: collapse.

table {
  border-spacing:0;
}

.item1, .item2, .item3 {
  border-top:1pt solid black;
  border-bottom:1pt solid black;
}
.item1 {
  border-left:1pt solid black;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.item3 {
  border-right:1pt solid black;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
<table>
  <tr>
   <td>I</td>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
    <td>K</td>
  </tr>
  <tr>
   <td>X</td>
    <td class="item1">A</td>
    <td class="item2">B</td>
    <td class="item3">C</td>
    <td>Y</td>
  </tr>
    <tr>
   <td>I</td>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
    <td>K</td>
  </tr>
</table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .