JSFiddle - React, Tailwind, and code Playground

by Олег

HTML

<table>
    <tr><th></th><th>7%</th><th>50%</th><th>70%</th></tr>
    <tr><td>30</td><td></td><td></td><td></td></tr>
    <tr><td>40</td><td></td><td></td><td></td></tr>
    <tr><td>50</td><td></td><td></td><td></td></tr>
</table>






































































<div class="footer">
Помогу в решении любого вопроса js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку<br>Аккаунт на тостере <a href="https://toster.ru/user/politon">toster.ru/user/politon</a><br><span>E-mail: oleg@w3schools.ru</span><br><span>Skype: politon81</span>
</div>
<!--Любое решение вопросов
E-mail: oleg@w3schools.ru
js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку
E-mail: oleg@w3schools.ru
Skype: politon81
-->

CSS

table{
  border-collapse:collapse;
  text-align:center;
}
tr td:nth-child(2n), th:nth-child(2n){
  background:#ff0;
}
td{
  border-top:solid 2px #f00;
  border-bottom:solid 2px #f00;
}
th{padding:3px;}































































































































/*Это не относится к Вашему коду*/
.footer{
  position:absolute;
  bottom:20px;
  right:20px;
  font-size:0.7em;
  background:#ff0;
}
span{
  color:#f00;
  font-weight:bold;
}

JavaScript

let table = document.body.children[0];
let row = table.rows;
for (i=1;i<=row.length;i++){
    let cell1 = row[i].cells[0].innerHTML;
    row[i].cells[1].innerHTML= cell1*7/100;
    row[i].cells[2].innerHTML= cell1*50/100;
    row[i].cells[3].innerHTML= cell1*70/100;
}