JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<table border="1" width="835">
                    <tbody>
                    <tr>
                        <th>US</th>
                        <th>UK</th>
                        <th>EURO</th>
                        <th>Heel-to-Toe (cm.)</th>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>5</td>
                        <td>40</td>
                        <td>23.5</td>
                    </tr>
                    <tr>
                        <td>6.5</td>
                        <td>5.5</td>
                        <td>40</td>
                        <td>24.1</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>6</td>
                        <td>41</td>
                        <td>24.7</td>
                    </tr>
                    <tr>
                        <td>7.5</td>
                        <td>6.5</td>
                        <td>41</td>
                        <td>25.3</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>7</td>
                        <td>42</td>
                        <td>25.9</td>
                    </tr>
                    <tr>
                        <td>8.5</td>
                        <td>7.5</td>
                        <td>42</td>
                        <td>26.5</td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>8</td>
                        <td>43</td>
                        <td>27.1</td>
                    </tr>
                    <tr>
                        <td>9.5</td>
                        <td>8.5</td>
                        <td>43</td>
                        <td>27.7</td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td>9</td>
                        <td>44</td>
                  ...

CSS

table {
  table-layout: fixed
}

JavaScript

$tbl = $('table');
colkeys = ['us','uk','euro','heeltoe'];
var rows = [],
keys = [];
$tbl.find('tr').each(function(){ 
    var this_row = [],
    key_row = {};
    $(this).find('td').each(function(i){
         var val = $(this).text();
         key_row[colkeys[i]] = val;
         this_row.push(val);
             
    });
    rows.push(this_row);
    keys.push(key_row);
});

$('body').prepend('<textarea style="height:80px; width: 100%;">'+JSON.stringify(rows)+'</textarea>');
$('body').prepend('<textarea style="height:80px; width: 100%;">'+JSON.stringify(keys)+'</textarea>');