Following this tutorial https://css-tricks.com/responsive-data-tables/, I was able to style a table to be responsive:
but there is a part where we have to use CSS generated content (:before) to label each table row by doing this:
function convertTablesForMobileView() {
let allTables = document.querySelectorAll("table");
allTables.forEach(function (item, index) {
formatTable(item, index);
});
}
function formatTable(currentTable, index) {
let th = currentTable.querySelector("thead>tr").children;
let styleSheet = document.styleSheets[3];
currentTable.id = "table" + index;
let tableId = currentTable.id;
currentTable.classList = "";
for (let i = 0; i < th.length; i++) {
styleSheet.addRule(
`#${tableId}>tbody>tr>td:nth-of-type(${i + 1}):before`,
`content:'${shortenString(th[i].innerHTML)}'`
);
}
}td:nth-of-type(1):before {
content: "First Name";
}
td:nth-of-type(2):before {
content: "Last Name";
}
td:nth-of-type(3):before {
content: "Job Title";
}
td:nth-of-type(4):before {
content: "Favorite Color";
}
td:nth-of-type(5):before {
content: "Wars of Trek?";
}
td:nth-of-type(6):before {
content: "Secret Alias";
}
td:nth-of-type(7):before {
content: "Date of Birth";
}
td:nth-of-type(8):before {
content: "Dream Vacation City";
}
td:nth-of-type(9):before {
content: "GPA";
}
td:nth-of-type(10):before {
content: "Arbitrary Data";
}My question is how do I make this dynamic with CSS. How do I add labels like the above image with the only CSS.