JSFiddle - React, Tailwind, and code Playground

by timspqr

HTML

<table class="table">
  <tr>
    <th>Id</th>
    <th>Text</th>
      <th>Data <div class='hidden'></div></th>
 </tr>
 <tr>
   <td >12.1.124.144</td>
     <td><div>testing updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updatestesting updates</div></td>
   <td width="10%">2014-02-02 18:01:14</td>
 </tr>
 <tr>
   <td>12.1.124.144</td>
   <td><div>testing updates</div></td>
   <td>2014-02-02 18:01:13</td>
 </tr>
 <tr>
   <td>12.1.124.144</td>
   <td><div>testing updates</div></td>
   <td>2014-02-02 18:01:13</td>
 </tr>
 <tr>
   <td>12.1.124.144</td>
   <td><div>testing updates</div></td>
   <td>2014-02-02 18:01:13</td>
 </tr>
 <tr>
   <td>12.1.124.144</td>
   <td><div>testing updates</div></td>
   <td>2014-02-02 18:01:13</td>
 </tr>
</table>
<div id='popupdialog'>X</div>

CSS

body {
    background-size:cover;
    background:#ebe8de;
}
.table {
    margin-top: 20px;
    border-collapse: collapse;
}
.table th {
    border-top: 5px solid black;
    border-collapse: collapse;
}
.table td:first-child {
    width: 100px;
}
.table td:nth-child(2) {
    width: 300px;
}
.table td:last-child {
    width: 150px;
}
.table td  {
    border: 1px solid black;
    padding: 5px;
}
.table td div {
    width: 400px;
    white-space: nowrap;
    overflow: hidden;
    border: 0px solid black;
    text-overflow: ellipsis;
}
.hidden {
    diplay: none;
    width: 10px;
    height: 10px;
}

JavaScript

var popupdialog = $('#popupdialog').dialog({
    autoOpen: false,
    width: 'auto',
    height: 'auto',
    position: {my: 'top right',
               at: 'middle left',
               of: '.hidden'}
                                  });
$('.table td div').click(function(){
       popupdialog.dialog('open');
       var cloneme = $(this).clone();
       $('#popupdialog').html(cloneme);

});
$('.table td div').mouseout(function(){
       $(this).css('background-color', 'transparent');
       popupdialog.dialog('close');

});