JSFiddle - React, Tailwind, and code Playground

by eTiger13

HTML

<div class="grid">
    <table cellspacing="0" cellpadding="0" class="btable" style="width: 525px">
      <tbody>
        <tr>
          <td class="rownum" style="text-align: center; width: 25px; max-width: 25px;">1</td>
          <td style="width: 100px">cell 1</td>
          <td style="width: 100px">cell 2</td>
          <td style="width: 100px">cell 3</td>
          <td style="width: 100px">cell 4</td>
          <td style="width: 100px">cell 5</td>
        </tr>
        <tr>
          <td class="rownum" style="text-align: center; width: 25px; max-width: 25px;">2</td>
          <td style="width: 100px">cell 1</td>
          <td style="width: 100px">cell 2</td>
          <td style="width: 100px">long long long long long long long long long long cell 3</td>
          <td style="width: 100px">cell 4</td>
          <td style="width: 100px">cell 5</td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

.grid .btable {
  table-layout: fixed;
  margin-left: 0;
  width: 0;
}
.grid TBODY TR TD {
  height: 20px;
  padding: 0 2px 0 2px;
  border-right-width: 1px;
  border-right-color: inherit;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: inherit;
  border-bottom-style: solid;
  font-weight: normal;
  overflow: hidden;
  text-align: left;
  white-space: pre;
  cursor: pointer;
}

.grid .rownum {
  border-top: none;
  border-left: none;
  cursor: default;

  -moz-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.grid TH.rownum {
  border-bottom: none;

  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
}
.grid TD.rownum {
  padding: 0 2px 0 2px;
  margin: -1px;
}

.colorme
{background-color: green; }

JavaScript

$('.btable tr td').each(function()
{
    var $this = $(this);
    var $text = $this.text();
    
    if ( $text.length > 8 )
    {
        $('<div id="delete" />').text($text).css('opacity',0).appendTo('body');
        if ( $('#delete').width() > 100 )
        {
            $this.addClass('colorme');
        }
        $('#delete').remove();
    }
});