Table row without borders (including leftmost and rightmost)

Question

I want a specific row in a table completely borderless. (The idea is for a large collection add a symbolic "gap" and continue with deeper data).

I've found the way to set the cells borderless but the table's border still is visible on that row.

One solution could be creating another table below but the problem then is that I'd lose the alignment of columns.

If I set the table without borders then the border-collapse is not effective. (Note: This statement is not true, I leave it because it was in the original post)

    table, tr, td {
      border: 2px solid black;
      border-collapse: collapse;
    }
    .empty_row{
      border: 0;
    }

    <table>
      <tr>
        <td>AAA</td>
        <td>BBBB</td>
        <td>CCCC</td>
      </tr>
      <tr >
        <td>DDD</td>
        <td>EEE</td>
        <td>FFF</td>
      </tr>
    
      <tr class='empty_row'>
        <td class='empty_row' colspan='3'>..... (this should have no borders at the sides)</td>
      </tr>
    
      <tr>
        <td>GGGGGGGG</td>
        <td>HHH</td>
        <td>III</td>
      </tr>
    </table>

Any ideas?

Answer 1

table {
border-collapse:collapse;
}
tr td {
  border: 2px solid black;
}
.empty_row{
  border: 0px;
}

<table>
  <tr>
    <td>AAA</td>
    <td>BBBB</td>
    <td>CCCC</td>
  </tr>
  <tr >
    <td>DDD</td>
    <td>EEE</td>
    <td>FFF</td>
  </tr>

  <tr class='empty_row'>
    <td class='empty_row' colspan='3'>.....</td>
  </tr>

  <tr>
    <td>GGGGGGGG</td>
    <td>HHH</td>
    <td>III</td>
  </tr>
</table>