Anyone got neat solutions for scrolling tables on mobile?
-
- Sr. Propeller Head
- Posts: 125
- Joined: Thu Mar 05, 2015 4:24 am
- Location: Chesterfield, Derbyshire, UK
- Contact:
Anyone got neat solutions for scrolling tables on mobile?
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)?
-
- Propellus Maximus
- Posts: 810
- Joined: Wed Jul 25, 2012 11:36 am
- Location: Ann Arbor, MI
Re: Anyone got neat solutions for scrolling tables on mobile
I've done this using a blank image as the cell background, which you can add in the table CSS.StraygoatWriting wrote:I've seen sites where tables are re-formatted where every row looks like a single 100% width column...
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
-
- Sr. Propeller Head
- Posts: 125
- Joined: Thu Mar 05, 2015 4:24 am
- Location: Chesterfield, Derbyshire, UK
- Contact:
Re: Anyone got neat solutions for scrolling tables on mobile
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).
-
- Senior Propellus Maximus
- Posts: 3669
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Anyone got neat solutions for scrolling tables on mobile
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).
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Sr. Propeller Head
- Posts: 125
- Joined: Thu Mar 05, 2015 4:24 am
- Location: Chesterfield, Derbyshire, UK
- Contact:
Re: Anyone got neat solutions for scrolling tables on mobile
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.
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.
-
- Sr. Propeller Head
- Posts: 111
- Joined: Tue Aug 20, 2013 11:38 pm
Re: Anyone got neat solutions for scrolling tables on mobile
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
Also, do you know how to limit this script to work on tables associated with a particular style class?
Thanks,
Deepti
Re: Anyone got neat solutions for scrolling tables on mobile
I'd imagine you change the selector this line:deeptikorwar wrote: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
Code: Select all
$('table tbody tr').each(function(){
Code: Select all
$('table.class-name-in-the-output tbody tr').each(function(){
-
- Sr. Propeller Head
- Posts: 111
- Joined: Tue Aug 20, 2013 11:38 pm
Re: Anyone got neat solutions for scrolling tables on mobile
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);
});
});
});
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);
});
});
});
-
- Sr. Propeller Head
- Posts: 111
- Joined: Tue Aug 20, 2013 11:38 pm
Re: Anyone got neat solutions for scrolling tables on mobile
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 Mobile Thanks,
Deepti
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 Mobile Thanks,
Deepti
You do not have the required permissions to view the files attached to this post.
Re: Anyone got neat solutions for scrolling tables on mobile
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.
So I think the code needs a rewrite if the page will have more than one table.
Code: Select all
var text = $('table ...
-
- Sr. Propeller Head
- Posts: 111
- Joined: Tue Aug 20, 2013 11:38 pm
Re: Anyone got neat solutions for scrolling tables on mobile
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.
JavaScript code
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=..
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);
});
});
});
});
Re: Anyone got neat solutions for scrolling tables on mobile
The DataTables (https://datatables.net/) Responsive extension will also redraw a table with a configurable layout for mobile.
-
- Sr. Propeller Head
- Posts: 111
- Joined: Tue Aug 20, 2013 11:38 pm
Re: Anyone got neat solutions for scrolling tables on mobile
Looks good. Have you used this with Flare output? Is there a process that I can refer to for implementation with Flare?
Re: Anyone got neat solutions for scrolling tables on mobile
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
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