JSFiddle - React, Tailwind, and code Playground

by joshuamartin

HTML

<table id="tID">
<tr>
  <td>A</td>
  <td>B</td>
  <td>C</td>
</tr>
<tr>
  <td>D</td>
  <td>E</td>
  <td>F</td>
</tr>
<tr>
  <td>G</td>
  <td>H</td>
  <td>I</td>
</tr>
</table>

CSS

table#tID {
  border-collapse: collapse;
}

td {
  padding: 0px;
  border: 1px solid #d3d3d3;
  width: 300px;
  height: 100px;
  text-align: center;
  white-space: nowrap;
}

JavaScript

(function() {
    var tdWidth = '300';     
    $("table#tID").attr('width', $("#tID").find('tr')[0].cells.length * tdWidth);
})();