CODALSD

В чем проблема используйте media querries и на необходимых breakpoint показывайте или прячьте блоки, если же проблема с тем что бы не было лишнего контента тогда используйте window.resize с динамической подгрузкой. Но первый вариант все же лучше

А что если посадить на любой готовый движок? тот же wordpress, чем не устраивает?

Teleport Pro

https://www.w3.org/TR/html-aria/

Раз уж заморочились вопросами семантики...

Forms Plus. Но он платный. Соглашусь с Дмитрий Кузнецов , что мешает написать все так, как нужно?

@media (max-width: 575.98px)
.grid {
    width: 50vw;
}
.grid-item {
   width:100%;
}

Как вариант, но картинки будет резать немного

1 вариант:

<table style="width: 100%; border-collapse: collapse; padding: 10px 20px; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; color: #333333; text-align: center;">
            <thead>
                <tr>
                  <th colspan="7" style="padding: 15px 0; font-size: 19px; font-weight: bold;">
                   Currency rate changes
                  </th>
                </tr>             
            </thead>
            <tbody>
              <tr class="tr">
                <td class="td">Currency pair</td>
                <td class="td">Exchanges</td>
                <td class="td">Direction</td> 
                <td class="td">Accounting price</td>
                <td class="td">Current price</td>  
                <td class="td">&plusmn;</td> 
                <td class="td">%</td> 
              </tr>

             
            </tbody>
          </table>

th {
  border:none;
}
.tr {
background-color: #e2e2e2;
height: 50px;
padding: 10px;
}
.td {
border: 1px dotted #777; 
border-right: none;
}
.td:first-child {
  height: 50px; 
}
.td:last-child {
  border-right: 1px dotted #777;
}

2 вариант:

th {
  border:none;
 background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
}
.tr {
background-color: #e2e2e2;
height: 50px;
padding: 10px;
}
.td {
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;
border-bottom:1px dotted #777;

}
.td:first-child {
  height: 50px; 
  border-left: 1px dotted #777;
}
.td:last-child {
  border-right: 1px dotted #777;
}