Уменьшение значения атрибута colspan, при сокрытии столбцов в таблице HTML

Используя @media в CSS стилях для дисплеев с маленьким разрешением, скрываю полностью "Скрываемый столбец 1", используя стили.

Можно скопировать HTML код в файл и изменить разрешение браузера, чтобы увидеть проблему.

table, 
th, 
td { 
  border: 1px solid #000; 
} 
 
@media screen and (min-width:0px) and (max-width: 760px) { 
  .hidden-for-small-displays { 
    display: none; 
  } 
}

<table> 
  <tr> 
    <td class="hidden-for-small-displays">Скрываемый столбец 1</td> 
    <td>Столбец 2</td> 
    <td>Столбец 3</td> 
  </tr> 
  <tr> 
    <td class="hidden-for-small-displays">Значение 1</td> 
    <td>Значение 2</td> 
    <td>Значение 3</td> 
  </tr> 
  <tr> 
    <td colspan="2">Итог: </td> 
    <td>100</td> 
  </tr> 
</table>

Выходит, как нужно, однако последняя строка итогов, смещается и ячейка со значением "100" вылазит за пределы таблицы, мне нужно, чтобы она была под "столбцом 3"

Как решить данную ситуацию? Думал в направлении использования стиля: visibillity: collapse; но не понял, как он работает и подходит ли в моём случае? Не хочется применять CSS для изменения значения атрибута colspan, при уменьшении видимых столбцов. Хочется всё решить средствами CSS.