0

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?"

Community
  • 1
  • 1
Mumbai CabinCrew
  • 341
  • 2
  • 4
  • 14

1 Answers1

8

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.

LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • phew! it was that simple!! Thanks... 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? – Mumbai CabinCrew Sep 23 '14 at 13:33
  • @MumbaiCabinCrew, in order not to mix the subjects, I suggest you open another question here on SO with this specific issue, providing the code if possible. We'll be glad to help! :) – LcSalazar Sep 23 '14 at 13:34