JSFiddle - React, Tailwind, and code Playground

by rew222

HTML

<table id="myTable">
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
  <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>

<style>
  #myTable { border-collapse: collapse; }
  #myTable td { padding: 10px; border: 1px solid black; }
  .hover-row { position: absolute; width: 100%; background: white; }
  .hover-row td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
</style>

<script>
let timeout, hiddenRow, hoverRow;

document.querySelectorAll('#myTable td').forEach(cell => {
  cell.addEventListener('mouseenter', e => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      const row = e.target.closest('tr');
      const table = row.closest('table');
      const colCount = row.cells.length;
      
      if (hoverRow) hoverRow.remove();
      if (hiddenRow) hiddenRow.style.display = '';
      
      hoverRow = table.insertRow(row.rowIndex);
      hoverRow.className = 'hover-row';
      const leftCell = hoverRow.insertCell();
      const rightCell = hoverRow.insertCell();
      leftCell.colSpan = Math.floor(colCount / 2);
      rightCell.colSpan = Math.ceil(colCount / 2);
      leftCell.textContent = "I believe in Claude, the future of coding";
      rightCell.textContent = e.target.textContent;
      
      hiddenRow = table.rows[row.rowIndex === 0 ? table.rows.length - 1 : table.rows.length - 2];
      hiddenRow.style.display = 'none';
      
      // Adjust font size
      leftCell.style.fontSize = '1px';
      let fontSize = 1;
      while (leftCell.scrollWidth > leftCell.offsetWidth && fontSize < 20) {
        fontSize++;
        leftCell.style.fontSize = `${fontSize}px`;
      }
    }, 1000);
  });

  cell.addEventListener('mouseleave', () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      if (hoverRow) {
        hoverRow.remove();
        hoverRow = null;
      }
      if (hiddenRow) {
     ...