Column Collapse Problem

by jado66

HTML

<body>
    <div style="text-align: center;">
        <table>
            <colgroup>
                <col id = "col_1">
                <col id = "col_2">
                <col id = "col_3">
                <col id = "col_4" class="collapsed-col">
                <col id = "col_5" class="collapsed-col">
                <col id = "col_6">
            </colgroup>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
                <th>Col 6</th>
            </tr>
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
                <td>1.4</td>
                <td>1.5</td>
                <td>1.6</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
                <td>2.4</td>
                <td>2.5</td>
                <td>2.6</td>
            </tr>
        </table>
    </div>
    
</div>

CSS

.collapsed-col{
  visibility: collapse;
}

table{
  border-spacing: 0;
  border-collapse: collapse;
  margin: auto; 
  border: 1px solid black;
}

th{
  border-bottom: 1px solid grey;
}

td{
  text-align: center;
}