Recently, I was a part of this migration project in which a complete website was redesigned from scratch using bootstrap framework and data from the old site was migrated to the new site. In this project, a team of developers took care of the data migration in which they imported the old data “as-is” to the new site’s database. The old website was basically a knowledge based articles site and the content was not responsive at all. One of the most common HTML element that was using in thousands of articles on the old site was “tables”.
In this project, I was involved in testing the brand new site and making sure that the migrated data is correct. During the testing phase, I found one major problem with the content – i.e. unresponsible tables. Everything on the new site was responsive except the tables. Since, the content on old site was not responsive at all and data was migrated “as-is”, the issues from old site were inhered in the new site as well in form of content. The main issue with the old content was that the styling was defined in the HTML mark-up itself (NOT globally via classes or IDs and stylesheet).
Now, the only way this problem could be resolved correctly was to update the content (actual HTML mark-up) and assign bootstrap classes or IDs to the tables so that the responsive behavior can be controller from the stylesheets. But, we didn’t have this option because we were dealing with thousands of articles and updating content of each article will take forever. We were running out of time as the launch was approaching so we had to come up with a quick fix.
So, I came up with an idea of making unresponsive tables responsive and it fixed the problem globally on the new site. Today, I will be sharing that “quick fix” with you guys...
Here is an example of an unresponsive HTML table:
<table width="100%" >
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
Bootstrap framework requires a specific HTML formatting in order to make tables response and add scrollbar (which is quite common in bootstrap tables).
So, if you have control over adding JavaScript to your template / masterpage (or a webpage) where the unresponsive tables are being display then then you could do a little client side DOM manipulation get the bootstrap styles working.
In bootstrap framework, "table" class is usually assigned to a table element and a DIV with "table-responsive" class wraps that table element in order to add a scroll bar on mobile devices.
This example we will adds the table class to the table element and wrap the table element with a DIV with the table-responsive class.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
<script type="text/javascript">
$(function () {
$('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
</script>
</head>
<body>
<table width="100%">
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</body>
</html>
So, the above code is make all the old / unresponsive tables responsive by making them as bootstrap compatible and display correctly on mobile device.
Now, in order to make this solution future proof, we need to think of a solution that works on a long-run. That's great that we have made all of our unresponsive tables responsive in one single step but we might plan on creating all the future table elements as responsive by assigning table class in the html mark-up. In this case, our solution will mess up the new / correctly written tables because it will try to assign the class again via JavaScript and wrap the table twice (one in the HTML mark-up and one via JavaScript on client-side).
The question is - How can we only assign table class and add DIV wrap to old tables only while ignoring the new tables that does include the correct bootstrap class and DIV wrap. Well, we will simply add a exception via .not().
We will update the JavaScript like this and it will make our solution future-proof.
<script type="text/javascript">
$(function () {
$('table').not('.table')
.addClass('table')
.wrap('<div class="table-responsive"></div>');
});
</script>
Here is a complete example of tables with and without bootstrap class & DIV wrap.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
<script type="text/javascript">
$(function () {
$('table').not('.table')
.addClass('table')
.wrap('<div class="table-responsive"></div>');
});
</script>
</head>
<body>
<table width="100%" >
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Let me know if this solution helped you in making unresponsive tables responsive.
