Table vs Div rendering (v9)

Revision 9 of this benchmark created on


Description

Testing rendering performance when changing a table cell vs a div.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="table-target">
<table class="hours">
  <tbody>
    <tr class="text header">
      <th></th>
      <th colspan="4">
        <span class="offset15">5 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">6 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">7 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">8 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">9 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">10 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">11 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">12 pm</span>
      </th>
      <th colspan="4">
        <span class="offset15">1 pm</span>
      </th>
      <th colspan="4">
        <span class="offset15">2 pm</span>
      </th>
      <th colspan="4">
        <span class="offset15">3 pm</span>
      </th>
      <th colspan="4">
        <span class="offset15">4 pm</span>
      </th>
    </tr>
    <tr>
      <td class="text">
        Tue, Nov 20
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data">
        <div class="active-cell">
          <div class="hidden" class="data"></div>
        </div>
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Wed, Nov 21
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Thu, Nov 22
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Fri, Nov 23
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Sat, Nov 24
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Sun, Nov 25
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Mon, Nov 26
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Tue, Nov 27
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Wed, Nov 28
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Thu, Nov 29
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Fri, Nov 30
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Sat, Dec 1
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Sun, Dec 2
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Mon, Dec 3
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Tue, Dec 4
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Wed, Dec 5
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
  </tbody>
</table>
</div>


<div id="div-target">
    <div class="row" class="text header">
      <div></div>
      <div>
        <span class="offset15">5 am</span>
      </div>
      <div>
        <span class="offset15">6 am</span>
      </div>
      <div>
        <span class="offset15">7 am</span>
      </div>
      <div>
        <span class="offset15">8 am</span>
      </div>
      <div>
        <span class="offset15">9 am</span>
      </div>
      <div>
        <span class="offset15">10 am</span>
      </div>
      <div>
        <span class="offset15">11 am</span>
      </div>
      <div>
        <span class="offset15">12 pm</span>
      </div>
      <div>
        <span class="offset15">1 pm</span>
      </div>
      <div>
        <span class="offset15">2 pm</span>
      </div>
      <div>
        <span class="offset15">3 pm</span>
      </div>
      <div>
        <span class="offset15">4 pm</span>
      </div>
    </div>
    <div class="row">
      <div class="text">
        Tue, Nov 20
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data">
        <div class="active-cell">
          <div class="hidden" class="data"></div>
        </div>
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Wed, Nov 21
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Thu, Nov 22
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Fri, Nov 23
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Sat, Nov 24
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Sun, Nov 25
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Mon, Nov 26
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Tue, Nov 27
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Wed, Nov 28
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Thu, Nov 29
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Fri, Nov 30
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Sat, Dec 1
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Sun, Dec 2
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Mon, Dec 3
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Tue, Dec 4
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Wed, Dec 5
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
</div>

Setup

var table = document.getElementById('table-target'); 
    var tableCells = table.getElementsByClassName('data');
    
    var div = document.getElementById('div-target'); 
    var divCells = div.getElementsByClassName('data'); 
    
    var data = [
    [53,164,243,255], [0,137,236,255], [0,77,147,255], [52,210,64,255]
    ];

Test runner

Ready to run.

Testing in
TestOps/sec
table rendering
// test one table
$.each(data, function(i, color) {
  for (var i = 0, ii = tableCells.length; i < ii; ++i) {
    tableCells[i].style.backgroundColor = 'rgba(' + (color.join(', ')) + ')';
  };
});


 
ready
div rendering
// test two div
$.each(data, function(i, color) {
  for (var i = 0, ii = divCells.length; i < ii; ++i) {
    divCells[i].style.backgroundColor = 'rgba(' + (color.join(', ')) + ')';
  };
});
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.