Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Get table headings to use with responsive table layout
/* Credits:
This bit of code: Exis |
Original idea: Dudley Storey | */
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");
for (var i = 0; i < headers.length; i++) {
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);

This comment has been minimized.

Copy link

@Elgameel Elgameel commented Apr 6, 2019

Hi @jpen365,

How to exclude certain tables?
For example how to exclude all tables with this class is-style-stripes this table:

<table class="wp-block-table aligncenter is-style-stripes">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment