JSFiddle - React, Tailwind, and code Playground

by Manuel

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />

  <div id="container">
    <table>
      <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <tr>
        <th>Field 1</th>
        <th>Field 2</th>
        <th>Field 3</th>
        <th>Field 4</th>
        <th>Field 5</th>
        <th>Field 6</th>
        <th>Field 7</th>
      </tr>
      <tr>
        <td>Value 1 Field 1</td>
        <td>Value 1 Field 2</td>
        <td>Value 1 Field 3</td>
        <td>Value 1 Field 4</td>
        <td>Value 1 Field 5</td>
        <td>Value 1 Field 6</td>
        <td>Value 1 Field 7</td>
      </tr>
      <tr>
        <td>Value 2 Field 1</td>
        <td>Value 2 Field 2</td>
        <td>Value 2 Field 3</td>
        <td>Value 2 Field 4</td>
        <td>Value 2 Field 5</td>
        <td>Value 2 Field 6</td>
        <td>Value 2 Field 7</td>
      </tr>
      <tr>
        <td>Value 3 Field 1</td>
        <td>Value 3 Field 2</td>
        <td>Value 3 Field 3</td>
        <td>Value 3 Field 4</td>
        <td>Value 3 Field 5</td>
        <td>Value 3 Field 6</td>
        <td>Value 3 Field 7</td>
      </tr>
    </table>
  </div>

CSS

#container {
  border: 1px red solid;
  margin: 0 auto;
  width: 900px;
}

table {
  height: 100%;
  width: 100%;
}

col:nth-child(n) {
  background: #F0F
}

col:first-child {
  background: #FF0
}

col:nth-child(2n+3) {
  background: #0FF
}

th {
  height: 20px;
  background: #ACC
}

td {
  border: 1px blue solid;
}

JavaScript

$(document).ready(function() {

  $("div#container").resizable();

  $("td").resizable({
    containment : "div#container",
    handles : "e"
  });

});