[STOP DOWNVOTING: NEW AND IMPROVED]
Discovering a simple technique on stackoverflow to transform tables into divs has been quite enlightening. By assigning classes to each tag, such as:
<table class="table">
the process of converting from table to div structure while retaining the class names becomes seamless. This includes tbody, tr, and td tags.
My strategy involves modifying the HTML code when the browser width hits a specific threshold.
function checkSize(){
if ($(window).width() < 768) {
tableChanger();
}else{
console.log("higher");
}
}
var tableChanger = function(){
$('table').each(function (){
$(this).replaceWith( $(this).html()
.replace(/<tbody/gi, "<div ")
.replace(/<tr/gi, "<div ")
.replace(/<\/tr>/gi, "</div>")
.replace(/<td/gi, "<div")
.replace(/<\/td>/gi, "</div>")
.replace(/<\/tbody/gi, "<\/div")
);
});
}
I'm curious if it's possible to reverse this process and generate tables from div elements. However, the challenge lies in the fact that all closing tags are
</div>
This complexity makes a straightforward replacement operation ineffective.
The website I'm developing requires responsiveness, hence why I had to resort to using tables.