JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div1000">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
            <td>44</td>
            <td>55</td>
            <td>66</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

CSS

.div1000 { width:1000px; border:2px solid gray; }

table { border-spacing:0; border-collapse:colapse; table-layout:fixed; width:100%; }
table td, table th { padding: 0; }

.td1 { width:3.9%;background-color:lightblue; }
.td2 { width:2.9%;background-color:orange; }
.td3 { width:1.9%;background-color:lightblue; }
.td4 { width:0.9%;background-color:orange; }
.td5 { width:0.4%;background-color:lightblue; }

JavaScript

$("table tr").each(function() {
    $("td", this).each(function(i) {
        $(this).addClass("td" + (i+1));
    });
});

$("table tr").each(function() {    
    var $container = $("<div>", {
        css: {
            margin: 10,
            border: "2px solid black"
        }                
    }).appendTo(document.body);
    
    
    $("td", this).each(function(i) {
        $("<div>", {
            text: "index=" + (i+1).toString() + ", text=" + $(this).text() + ", width=" + $(this).outerWidth() + "px"
        }).appendTo($container);
    });
});