JSFiddle - React, Tailwind, and code Playground

by samizdam

HTML

<table class="zebra benedict-FLC backlight"><caption>Ток номинальной нагрузки двигателя (ТНН) и минимальный номинала «медленного» ("gL") предохранителя от K3</caption>
<thead>
<tr>
    <th colspan="2" class="">Мощность двигателя</th>
    <th colspan="3" class="">Диапазон согласно BS для 415V</th>
    <th>Двигатель 220-230V</th>
    <th colspan="2">Номинал предохран. при пуске </th>
    <th class="">Двигатель 380-400V</th>
    <th colspan="2">Номинал предохран. при пуске </th>
    <th>Двигатель 500V</th>
    <th colspan="2">Номинал предохран. при пуске </th>
    <th>Двигатель 660-690V</th>
    <th colspan="2">Номинал предохран. при пуске </th>
</tr>
<tr>
    <th class="">kW</th>
    <th class="">PS~hp</th>
    <th class="">hp</th>
    <th>cos(phi)</th>
    <th>%</th>
    <th>ТНН <br>(А)</th>
    <th>D.O.L. <br>(A)</th>
    <th>YD <br>(A)</th>
    <th class="">ТНН <br>(А)</th>
    <th>D.O.L. <br>(A)</th>
    <th>YD <br>(A)</th>
    <th>ТНН <br>(А)</th>
    <th>D.O.L. <br>(A)</th>
    <th>YD <br>(A)</th>
    <th>ТНН <br>(А)</th>
    <th>D.O.L. <br>(A)</th>
    <th>YD <br>(A)</th>
</tr>
</thead>
<tfoot>
<tr>
    <th>kW</th>
    <th>PS~hp</th>
    <th>hp</th>
    <th>cos(phi)</th>
    <th>%</th>
    <th>ТНН <br>(А)</th>
    <th>D.O.L. <br>(A)</th>
    <th>YD <br>(A)</th>
    <th>ТНН <br>(А)</th>
    <th>D.O.L. <br>(A)</th>
    <th>YD <br>(A)</th>
    <th>ТНН <br>(А)</th>
    <th>D.O.L. <br>(A)</th>
    <th>YD <br>(A)</th>
    <th>ТНН <br>(А)</th>
    <th>D.O.L. <br>(A)</th>
    <th>YD <br>(A)</th>
</tr>
<tr>
    <th colspan="2">Мощность двигателя</th>
    <th colspan="3">Диапазон согласно BS для 415V</th>
    <th>Двигатель 220-230V</th>
    <th colspan="2">Номинал предохран. при пуске </th>
    <th>Двигатель 380-400V</th>
    <th colspan="2">Номинал предохран. при пуске </th>
    <th>Двигатель 500V</th>
    <th colspan="2">Номинал предохран. при пуске </th>
    <th>Двигатель 660-690V</th>
    <th colspan="2">Номинал предохран. при пуске...

CSS

table.benedict-FLC td{
    padding: 5px;
    text-align: left;
    font-family: monospace;
    border: 1px black solid;
    vertical-align: middle;
}

JavaScript

$(function(){
    var max_integer = 4;
    var use_char = ',';
    $('tbody tr td').each(function(i){
        var char = use_char;
        var num_value = $(this).text(); 
        var new_value = "";
        var fraction = num_value.split(char);
        var integer = fraction[0];
        var fractional = fraction[1];
        // может быть такое, что в ячейке оказалось целое число, без запятой
        // его мы дополним нулями, для единообразия. 
        if(fractional == undefined){
            fractional = '&nbsp;';
            char = '&nbsp;';
        }
        var charoff = num_value.indexOf(',');
        var str_length = num_value.length;
        var difference_integer = max_integer - integer.length;
        if(difference_integer > 0){
            new_value += new Array(difference_integer + 1).join('&nbsp;');
        }
        new_value += integer+char+fractional;        ;

        $(this).html(new_value);
    });
});