https://jobcenterofwisconsin.com/ClientJavaScript/ResponsiveTable.js

1$(document).ready(function () {
2 
3    InitializeResponsiveDataTables();
4
5    if (Sys.WebForms != undefined && Sys.WebForms.PageRequestManager != undefined) {
6        Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(ResponsiveTableEndRequestHandler);
7        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ResponsiveTableEndRequestHandler);
8    }
9});
10
11
12function ResponsiveTableEndRequestHandler(sender, args) {
13    InitializeResponsiveDataTables()
14}
15
16
17function InitializeResponsiveDataTables() {
18        
19    if ($(document).width() <= 675) {
20        $("table").filter(" .data-grid").each(function () {                        
21            
22            var hasHeader = $(this).hasClass("no-header") ? false : true;
23            var table = $(this).find(" > tbody");
24            if ($(table).length <= 0)
25                table = $(this);
26            
27            var header = $(table).find(" tr:first-child").find("th");
28            if (header.length <= 0 && hasHeader)
29                header = $(table).find(" tr:first-child").find("td");
30
31            var rows = hasHeader ? $(table).find(" > tr:not(:first-child)") : $(table).find(" > tr");
32
33            var tableDiv = "<div class=\"table-div\">";
34            $(rows).each(function () {
35                var rowDiv = "<div class=\"table-div-row\">"
36                $(this).find(" > td").each(function (i, col) {
37                    var colSpan = $(col).attr("colspan");
38                    if (colSpan === undefined)
39                        colSpan = 0;
40                    rowDiv += "<div>";
41                    if (hasHeader && colSpan != header.length)
42                        rowDiv += ("<div class=\"table-header\">" + $(header[i]).html() + "</div>");
43                    rowDiv += ("<div class=\"table-item\">" + $(col).html() + "</div>" + "<br class=\"table-item-break\" /></div>");
44                });
45                rowDiv += "</div>";
46                tableDiv += rowDiv;
47            });
48            tableDiv += "</div>";
49            $(tableDiv).insertBefore($(this));
50            $(this).hide();
51        });
52    }
53}