JSFiddle - React, Tailwind, and code Playground

by Frank Millman

JavaScript

if (document.body.style.cssFloat == undefined)
  cssFloat = 'styleFloat';  // IE
else
  cssFloat = 'cssFloat';  // standard

document.body.style.font = '10pt Verdana,sans-serif';
document.body.style.color = 'navy';

var grid = document.createElement('div');
grid.style.marginTop = '10px';
grid.style.marginLeft = '50px';
grid.style.border = '1px solid lightgrey';
document.body.appendChild(grid);

add_blank_row(grid);
add_data_row(grid);

add_blank_row(grid);
add_data_row(grid);

add_blank_row(grid);
add_data_row(grid);

add_blank_row(grid);

add_blank_row(grid);

// set border on one cell
grid.childNodes[3].childNodes[1].childNodes[0].style.border = '2px solid black';

grid.style.height = (21 * 5) + 'px';
grid.style.width = '249px';  // (100 + 4 + 16 + 2 + 2) * 2 + 1

function add_blank_row(grid) {
  var blank_row = document.createElement('div');
  grid.appendChild(blank_row);
  blank_row.style.height = '21px';
  blank_row.style.background = 'lightcyan';
  blank_row.style.verticalAlign = 'bottom';
};

function add_data_row(grid) {
  grid.childNodes[grid.childNodes.length-1]
    .style.display = 'none';
  var data_row = document.createElement('div');
  grid.appendChild(data_row);
  data_row.style.height = '21px';
  add_data_col(data_row, 'hallo');
  add_data_col(data_row, 'goodbye');
};

function add_data_col(data_row, text) {
  var col_span = document.createElement('div');
  if (data_row.childNodes.length)
    col_span.style.borderLeft = '1px solid grey';
  col_span.style.borderBottom = '1px solid grey';
  col_span.style[cssFloat] = 'left';
  data_row.appendChild(col_span);

  var cell = document.createElement('div');
  cell.style.border = ' 2px solid transparent';
  cell.style[cssFloat] = 'left';
  cell.style.width = '100px';
  cell.style.height = '16px';
  cell.style.overflow = 'hidden';
  cell.style.textOverflow = 'ellipsis';
  col_span.appendChild(cell);

  var text_node = document.createTextNode(text+text+text+text);
  cell.appendChild(text_node);

  var btn =...