Border radius on table with border collapse

Question

Border radius on table with border collapse

Navigation

#1 by (2 votes)

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:

Desiredoutcome:

Notice that my table uses border-collapse: collapse , which has prevented you from leaving the rounded borders with border radius . How can I resolve this problem?

html css

asked by anonymous 11.04.2016 / 19:36

1 answer

Tool to convert Excel to Json [duplicate] How to measure the amount of disk space required for an ALTER TABLE operation?

score 2 · Accepted Answer

Use 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>