Converting HTML tables to bootstrap columns – Responsive Design

Converting HTML tables to bootstrap columns – Responsive Design

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?

.
.
.

Cheers.

Solutions/Answers:

Solution 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)

Related:  Easy way to see the Bootstrap grid?

Solution 2:

To the OP: You need to rewrite your tables in entire project

As per your requirement you don’t want to rework any of the tables that are built and Also you want to convert existing tables to responsive div’s.

Firstly to give a solution that can work on your entire project it is very important that all the tables in your site follow same standard in its struture. Which I see from the login page its very random at the moment.

Even if you write a solution that can work on the screen you provided (login screen) I am not sure if that will be sufficient for your entire site. Tables in your screen are nested to the core. You never know what all might break if you take this aproach.

So my suggestion is.. What was done is done.. Previous developers used to use only tables to structure there pages, But the world has changed to responsiveness. And it will change in the next few years too. We never know. So its high time for you to rewrite all the pages into new HTML structure and be upgraded to latest possible code.


To general public: who want to change table to divs according to devices

Quick Check: Working fiddle (resize the result screen to see the effect)

As far as I understand the requirement you want to show a table in medium and large devices, But when the user is on small device or resize the screen to small then you want to display it in different manner, More like a div structure.

Related:  twitter bootstrap 3 modal on mobile scroll issues

I have a solution using inbuilt bootstrap classes.

Solution:

  • Create both your table (that you show in medium and large devices) and the other HTML structure (that you want to show in small devices).
  • Use bootstrap provided Helper Classe to toggle the display of table and the other section according to the viewport.

    Here is the snap from the Doc’s and a TestCase

enter image description here

So with the above given details all you need is ..

// the tables are visible only on medium and large devices
<table class="visible-md-block visible-lg-block"> 
  //..your table structure
</table>

 // This section is only visible in small and extra small devices
 <div class="visible-xs-block visible-sm-block"> 
  //The table data represented in a div structure.
  //Each row can be structured as sections with header as label and row data as value.
 </div>

Disadvantages:

  • With this approach you will end up with additional HTML if user is in any device Or never resizes the screen.

Advantages:

  • This doesn’t require you to keep tack of when the screen is resized so that you build the new section. Which also means you dont need Jquery.
  • This doesnt reuire you to find out which device is the user on.
  • Working is slick as its only CSS

Hope this helps!!

Solution 3:

i think you would have to rewrite your whole html if the site is based on html tables.

If you use tables just as “normal” tables you could just add class="table to your table

furthermore you could wrap your table inside an div with class="table-responsive"

e.g.:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

there also some further styles available: table-hover table-striped
you can find some samples here: http://getbootstrap.com/css/#tables

Solution 4:

I don’t think this is the “nicest” form to solve your problem, but if you can only use CSS and jQuery I think you can just div every part of the table data, use $(...).hide() to make it invisible and then use $(...).html() to place that content into the Bootstrap’s div’s.

Solution 5:

I think you’re right that a complete refactor might cost a lot of work. However I would really consider a more let’s call it hybrid solution: Why not pick some components and refactor them nicely. The old product you have will improve significantly, but just not 100% in the first step. For the parts which cannot be refactored right now, make a nifty plan. The solutions mentioned by others address your question perfectly, but I think you’ll be stuck with a unmaintainable product in the end. And nobody will benefit from such a product, right?

Solution 6:

Bootstrap is divided columns and rows that are responsive to all device try this

use this type of responsive design.

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-offser-2 col-lg-5">
            <form>
                <div class="form-group">
                    <input type="text" name="username" class="form-control" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" name="pass" class="form-control" placeholder="Password">
                </div>
                <div class="form-group">
                    <button class="btn btn-success">Login</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

References