Anyone got neat solutions for scrolling tables on mobile?

[StraygoatWriting]

I've got a project with loads of tables in and they are too wide on mobile outputs. I think I can add scrolls, but they are a bit ugly. I've seen sites where tables are re-formatted where every row looks like a single 100% width column, but that needs HTML editing on individual tables. Has anyone got any neat solutions for tables on mobiles that can be implemented with just CSS or scripts? (i.e. a fix to apply in one place rather than having to edit every single table)?

[kwag_myers]

I've seen sites where tables are re-formatted where every row looks like a single 100% width column...

I've done this using a blank image as the cell background, which you can add in the table CSS.

[StraygoatWriting]

Can you elaborate on that? Using just CSS, I managed to get the table row to go into a single-coloured cell (actually, I think it is several stacked cells, but they look like one).

[Nita Beck]

I am fairly sure that this is one of the points that Scott DeLoach discusses in his recorded webinar "Responsive Content: A CSS-based Approach" at https://www.madcapsoftware.com/demos/si ... 3382360462. That webinar is based on Scott's session of the same name at MadWorld 2015, which I attended. I'm pretty sure I recall him talking about responsive tables, including tables with a fixed left column so the rest of the columns would scroll horizontally (among other responsive table technqiues).

[StraygoatWriting]

Thanks for that Nita, I will check it out. As I was pushed for time, I did some digging around on the web and with the help of a developer, came up with another solution which I think it quite elegant. I don't have time to go into all the ins and outs right now, but may blog about it soon. What it does is take each row and make it appear as a full width single column, and then it adds the column text from the header to the cell too. So you end up with something that looks like a 'card' - a full width cell that lists the info from that row. It is a better solution that scrolling for mobile output IMO.

To do it, you need a little bit of javascript (which i linked to from my master page):

$(document).ready(function(){
$('table tbody tr').each(function(){
$(this).find('td').each(function(key, value){
var text = $('table thead tr th').eq(key).text();
$(this).attr('data-label', text);
});
});
});



And some styles in your CSS:

@media screen and (max-width: 698px) {

table {
border: 0;
}

table thead {
display: none;
}

table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}

table td {
display: block;
text-align: left;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}

table td:last-child {
border-bottom: 0;
}

table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
width: 100%;
}


I think that's all there was to it.

[deeptikorwar]

Thanks a lot for posting this code.

Also, do you know how to limit this script to work on tables associated with a particular style class?

Thanks,
Deepti

[NorthEast]

Thanks a lot :D for posting this code.

Also, do you know how to limit this script to work on tables associated with a particular style class?

Thanks,
Deepti

I'd imagine you change the selector this line:

Code: Select all

$('table tbody tr').each(function(){

So that it specifies a table with a class name; e.g.

Code: Select all

$('table.class-name-in-the-output tbody tr').each(function(){

[deeptikorwar]

Thanks a lot Dave.

That piece of code and css modified as below worked. TableStyle-GblAltBlue is the table class name.

table.TableStyle-GblAltBlue {
border: 0;
}

table.TableStyle-GblAltBlue thead {
display: none;
}

table.TableStyle-GblAltBlue tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}

table.TableStyle-GblAltBlue td {
display: block;
text-align: left;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}

table.TableStyle-GblAltBlue td:last-child {
border-bottom: 0;
}

table.TableStyle-GblAltBlue td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
width: 100%;
}

----script
$(document).ready(function(){
$('table.TableStyle-GblAltBlue tbody tr').each(function(){
$(this).find('td').each(function(key, value){
var text = $('table.TableStyle-GblAltBlue tr th').eq(key).text();
$(this).attr('data-label', text);
});
});
});

[deeptikorwar]

Hi All,

I am facing an issue with this one. Did anyone use the above code and have multiple tables with different header names in the same topic? The headers from the first table are displayed for all the other tables too in the mobile output. See screenshots below.

Desktop

Desktop.PNG

Mobile

Mobile.PNG

Thanks,
Deepti

[NorthEast]

I think that's because the selector in this line is just going to find the first instance of a table in the page, rather than the table that contains the current row/cell.

Code: Select all

var text = $('table ...

So I think the code needs a rewrite if the page will have more than one table.

[deeptikorwar]

Thanks Dave for the hint.

If anyone else is looking for a solution to this, here is the script. Mind you, I have strung together bits and pieces of code from the web and other optimum solutions may exist

Every table in a particular topic would need a unique ID, and a header row, for this code to work. After you have created all the tables in the top, switch to the text editor and add an id. For example, in this table, id="Tab1" has been added.

Code: Select all

<table id="Tab1" style=.. 

JavaScript code

Code: Select all

var CurrTabid;
$(document).ready(function(){
	$('table').each(function()
		{
		CurrTabid = $(this).attr('id'); /*This is overwitten with Table id each time*/
		
		var $mytable = ('table#' + CurrTabid + ' tbody tr' );  /*This is to generate the string 'table#Tab1 tbody tr'*/
		var $mytablehead = ('table#' + CurrTabid + ' thead tr th' ); /*This is to generate the string 'table#Tab1 thead tr th'*/
		
		$($mytable).each(function()
			{
			$(this).find('td').each(function(key, value)
				{
				var text = $($mytablehead).eq(key).text();
				$(this).attr('data-label', text);
				});
			});	
		});
});

[jjw]

The DataTables (https://datatables.net/) Responsive extension will also redraw a table with a configurable layout for mobile.

[deeptikorwar]

Looks good. Have you used this with Flare output? Is there a process that I can refer to for implementation with Flare?

[jjw]

I have used it with Flare (and Dave has some implementation tips in this thread:
viewtopic.php?f=13&t=27117&p=119657&hil ... es#p119657.
It can be a PITA getting all the extensions to work with RequireJS.

I must admit, I tried using the responsive extension for tables but I ended up not going ahead because redrawing the tables was a bit too slow. I was using large tables though.

J