In mobile view, tables with multiple columns can appear cramped and difficult to read. To address this issue, I’ve created a simple JavaScript script. By including this script in the webpage’s <head> section, and manually add the class name "table-to-list-in-mobile" to the immediate parent of the table element that you wish to convert into a list for mobile view. When the viewport width is less than 768 pixels, the script converts the table into a list, providing a more visually appealing layout.
/**
* Version: 1.0.0
* Author: Coolin ZHao
* Date: 03/22/2024
*/
;(function () {
// Constants for customization.
var TABLE_WRAP_CLASS = '.table-to-list-in-mobile'
var BREAK_POINT = 768
var convertTableToListInMobile = function () {
function removeAllChildren(element) {
while (element.firstChild) {
element.removeChild(element.firstChild)
}
}
if (window.innerWidth < BREAK_POINT) {
document.querySelectorAll(TABLE_WRAP_CLASS).forEach(function (tableWrap) {
var has_table_header = false
var table_header = []
var table_data = []
var i = 1
tableWrap.querySelectorAll(TABLE_WRAP_CLASS + ' table thead>tr').forEach(function (row) {
has_table_header = true
var table_row = []
row.querySelectorAll('th').forEach(function (cell) {
table_row.push(cell.textContent)
})
table_header.push(table_row)
i++
})
tableWrap.querySelectorAll(TABLE_WRAP_CLASS + ' table tbody>tr').forEach(function (row) {
var table_row = []
row.querySelectorAll('td').forEach(function (cell) {
table_row.push(cell.textContent)
})
table_data.push(table_row)
i++
})
var list = ''
for (var r = 0; r < table_data.length; r++) {
for (var c = 0; c < table_data[r].length; c++) {
list +=
'<span class="list-group-item list-group-item-action flex-column align-items-start">' +
(has_table_header ? '<b>' +
table_header[0][c] +
'</b>' +
' : ' : '' ) +
table_data[r][c] +
'</span><div class="flextable-spacer"></div>'
}
list += '<div class="flextable-spacer mt-3"></div>'
}
removeAllChildren(tableWrap)
tableWrap.innerHTML = list
})
}
}
document.addEventListener('DOMContentLoaded', function () {
convertTableToListInMobile()
})
})()Usage
First, add a wrapper <div> around the <table> element you wish to convert into a list for mobile view , then assign the class name "table-to-list-in-mobile" to this wrapper <div>. That’s all there is to it.
How It Works
Essentially, once the document has fully loaded and is ready, the script iterates through all elements with the class name “table-to-list-in-mobile", extracting all data from the rows and columns into an array. It works with tables, whether they have a header or not.
Afterward, the wrapper element removes all of its child elements and appends a list of data obtained from the previously extracted array.