Converting HTML tables to bootstrap columns - Responsive Design

Question

I have been working on an old product that we have, that currently uses HTML tables to display its content. In this world of responsiveness, I would like to make that responsive. After reading up online, I believe it might end up being a lot of work to rework the whole website, however, I am trying to find a solution that would convert any table into columns based on divs that contain bootstrap columns. A very example of this is given here for a login page:JsFiddle

I don't have access to the source of the fields, however, I can add elements (append/prepend) using jQuery. I can also add CSS styles.

Could someone help me out in this approach, please?

<table></table>
.
.
.
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
</div>
</div>

Cheers.

Answer 1

It might be hard to flawlessly convert any given table to bootstrap columns. Consider that bootstrap columns only allow for up to 12 columns and a table may have more than that.

This function will convert a table to BS rows/cols, but it assumes the number of table rows is evenly divisible by 12 (if not, you'll have to adjust it to your own needs).

/**
 * Convert a table to bootstrap columns
 * @param table DOMElement
 */
function makeBSCols(table){
    var html = ["<div class='container'>"];
    $(table).find('tr').each(function(){
        var $td = $(this).find('td').length ? $(this).find('td') : $(this).find('th');
        // get the column width
        if($td.length > 12) return alert("too many columns");
        var cls = Math.floor(12/$td.length);
        if(cls!==(12/$td.length)) return alert("invalid column count");
        html.push("<div class='row'>");
        $td.each(function(){
            html.push('<div class="col-sm-'+cls+'">'+$(this).html()+'</div>');
        });
        html.push('</div>');
    });
    html.push('</div>');
    $(table).replaceWith(html.join(''));
}

Example: makeBSCols(document.getElementById('myTable')) (Fiddle)

For a more flexible solution, (assuming you're actually displaying tabular data) you might consider just using BS tables rather than BS cols/rows. This one will just add BS styles to your table and put it in a .table-responsive div which helps with responsiveness.

/**
 * Convert a regular table to bootstrap table
 * @param table DOMElement
 */
function makeBSTable(otable){
    var table = $(otable).clone(); console.log(table);
    table.addClass("table-hover table-bordered table-striped table");
    var div = $('<div class="table-responsive" />');
    $(otable).replaceWith(div);
    div.append(table);
}

Example: makeBSTable(document.getElementById('myTable')) (Fiddle)