Rendering speed of table borders

Benchmark created on

Preparation HTML

<style>
table {
    border-collapse: collapse;
}

td.border {
    padding: 5px;
    border: 1px solid;
}

td.noborder {
    padding: 0;
}

td.noborder div {
    padding: 5px;
    border-top: 1px solid;
    border-left: 1px solid;
}

td.noborder:last-child div {
    border-right: 1px solid;
}

tr:last-child td.noborder div {
    border-bottom: 1px solid;
}

td.nopadding {
    padding: 0;
}

.border-top-left {
    padding: 5px;
    border-top: 1px solid;
    border-left: 1px solid;
}

.border-bottom {
    border-bottom: 1px solid;
}

.border-right {
    border-right: 1px solid;
}
</style>

<div id="ctr"></div>

Setup

ROW_COUNT = 10;
  COL_COUNT = 10;
  DATA = [];
    
  for (var r = 0; r < ROW_COUNT; r++) {
    var row = [];
    for (var c = 0; c < COL_COUNT; c++) {
      var text = String.fromCharCode(65 + c) + r; // A0, B1, C33, ...
      row.push(text);
    }
    DATA.push(row);
  }

Teardown



            document.getElementById("ctr").innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
Set borders to table cells and cell has the text
// Set borders to table cells and cell has the text
var html = [];
html.push("<table>");
for (var r = 0; r < ROW_COUNT; r++) {
  html.push("<tr>");
  for (var c = 0; c < COL_COUNT; c++) {
    html.push("<td class='border'>");
    html.push(DATA[r][c]);
    html.push("</td>");
  }
  html.push("</tr>");
}
html.push("</table>");

document.getElementById("ctr").innerHTML = html.join("");
ready
Set borders to table cells and cell has a div which has the text
// Set borders to table cells and cell has a div which has the text
var html = [];
html.push("<table>");
for (var r = 0; r < ROW_COUNT; r++) {
  html.push("<tr>");
  for (var c = 0; c < COL_COUNT; c++) {
    html.push("<td class='border'>");
    html.push("<div>");
    html.push(DATA[r][c]);
    html.push("</div>");
    html.push("</td>");
  }
  html.push("</tr>");
}
html.push("</table>");

document.getElementById("ctr").innerHTML = html.join("");
ready
Set borders to divs inside the cells where div has the text
// Set borders to divs inside the cells where div has the text
var html = [];
html.push("<table>");
for (var r = 0; r < ROW_COUNT; r++) {
  html.push("<tr>");
  for (var c = 0; c < COL_COUNT; c++) {
    html.push("<td class='noborder'>");
    html.push("<div class='border'>");
    html.push(DATA[r][c]);
    html.push("</div>");
    html.push("</td>");
  }
  html.push("</tr>");
}
html.push("</table>");

document.getElementById("ctr").innerHTML = html.join("");
ready
Set borders to divs inside the cells where div has the text via simplified CSS
// Set borders to divs inside the cells where div has the text via simplified CSS
var html = [];
html.push("<table>");
for (var r = 0; r < ROW_COUNT; r++) {
  html.push("<tr>");
  for (var c = 0; c < COL_COUNT; c++) {
    html.push("<td class='nopadding'>");
    extraClasses = "";
    if (c === COL_COUNT - 1)
        extraClasses += "border-right ";
    if (r === ROW_COUNT - 1)
        extraClasses += "border-bottom ";
    html.push("<div class='border-top-left " + extraClasses + "'>");
    html.push(DATA[r][c]);
    html.push("</div>");
    html.push("</td>");
  }
  html.push("</tr>");
}
html.push("</table>");

document.getElementById("ctr").innerHTML = html.join("");
ready

Revisions

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