Border Radius in table with border Collapse

Asked

Viewed 725 times

1

I have the following code:

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>

Result obtained:
inserir a descrição da imagem aqui

Desired result:
inserir a descrição da imagem aqui

Notice that my table uses border-collapse: collapse which has prevented the edges from being rounded with border radius. How can I solve this problem?

html css

1 answer

2


Utilize border-spacing:0 instead of 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.