Adding two class in an html table [duplicate]

Question

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

identity is defined once, classes are created multiple times separated by a space — alessandrio
– alessandrio, Commented Sep 23, 2014 at 13:30

LcSalazar · Accepted Answer · 2014-09-23 13:28:37Z

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.

answered Sep 23, 2014 at 13:28

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mumbai CabinCrew Over a year ago

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?

LcSalazar Over a year ago

@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! :)

Collectives™ on Stack Overflow

Adding two class in an html table [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related