在html表中添加两个类

Mum*_*rew 0 css tablesorter html-table class

看看这篇文章,我创建了一个类(t1),以便将表正确放置在移动设备上.像这样:

/*
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"; }
Run Code Online (Sandbox Code Playgroud)

我还从这个网站添加了一个表格分类器,分拣机也正常工作.分拣机已经有一个类(tablesorter)

当我使用以下内容时,由于t1类,表格在移动设备上正确定位

<table id="table1" class="t1" width="100%" border="1" >
Run Code Online (Sandbox Code Playgroud)

当我使用以下内容时,由于tablesorter类,表正在排序

<table id="table1" class="tablesorter" width="100%" border="1" >
Run Code Online (Sandbox Code Playgroud)

现在我的问题是我只能在表中使用一个类,因此移动定位正确或分拣机.我希望两者都能发挥作用.是否可以在表中使用两个类?我在这里读了一篇文章,但我认为它不适用于我的问题.谁能建议一种方法来实现这一目标?

t2类工作正常,因为我还没有对它进行分类.

谢谢

编辑:它不重复,因为我看到这里为多个类编写的函数,所以很困惑.我现在得到了解决方案,但是添加了一条评论"当在移动设备上逐行查看表格时,排序功能不起作用.虽然它可以在桌面上工作!有没有办法让它在移动设备上运行? "

LcS*_*zar 7

是的你可以.您可以通过用空格分隔元素来为元素定义多个类.

<table id="table1" class="t1 tablesorter" width="100%" border="1" >
Run Code Online (Sandbox Code Playgroud)

来自MDN全局属性参考:

class
此属性是元素类的空格分隔列表.