Looking at this article, I made a class (t1) so that the table is positioned properly on a mobile device. Like this:
/*
Label the data
*/
.t1 td:nth-of-type(1):before { content: "Name"; }
.t1 td:nth-of-type(2):before { content: "Category A"; }
.t1 td:nth-of-type(3):before { content: "Category B"; }
.t1 td:nth-of-type(4):before { content: "Category C"; }
.t2 td:nth-of-type(1):before { content: "Name"; }
.t2 td:nth-of-type(2):before { content: "Category X"; }
.t2 td:nth-of-type(3):before { content: "Category Y"; }
.t2 td:nth-of-type(4):before { content: "Category Z"; }
I also added a table sorter from this website and the sorter is working fine too. The sorter already has a class (tablesorter)
When I use the following, the table is positioned properly on mobile because of the t1 class
<table id="table1" class="t1" width="100%" border="1" >
When I use the following, the table is getting sorted because of the tablesorter class
<table id="table1" class="tablesorter" width="100%" border="1" >
Now my question I can use only one class in table so either mobile positioning happens properly or the sorter. I want both to function. Is it possible to use two classes in the table? I read an article here but i think it does not apply to my problem. Can anyone suggest a way to achieve this?
t2 class is working fine because i havent put a sorter on it.
Thank you
EDIT: Its not duplicate as I saw some function written for multiple classes here so got confused. I got the solution now however, added a comment "when the table is viewed row-by-row on mobile device, the sort function does not work. It works on desktop though! Is there any way to get it worked on mobile device?"
Yes, you can. You can define multiple classes to an element by separating them with a white space.
<table id="table1" class="t1 tablesorter" width="100%" border="1" >
From MDN Global Attributes Reference:
class
This attribute is a space-separated list of the classes of the element.