如何在 jQuery Mobile 中以条纹和笔划格式显示表格数据？

在本文中，我们将学习如何以条纹和笔划格式显示表格数据。要以条纹和笔划格式显示表格数据，请使用table-stripe 、 table-stroke 、 ui-responsive类设置 data-role=”table” 和 data-mode=”reflow” 。

回流模式： ui-responsive类用于创建响应式表格。呈现的响应式表中的数据有两种模式，回流和列切换。在本节中，我们将重点介绍回流模式。

回流模式以窄宽度重新格式化表格列，以便表格的每一行显示为数据对块。数据格式较复杂或冗长的表格信息，不需要在数据行之间进行比较，可以在回流模式下呈现。

句法：

类table-stripe ， table-stroke将给出表格斑马条纹效果的行。交替的行将有两种不同的阴影。

CDN链接：

 
 
 

方法：

• 首先，将上述 jQuery 和 jQuery Mobile CDN 链接添加到脚本中或下载到您的本地计算机。
• 创建一个表格标签并将数据角色属性设置为“table”，并将数据模式属性设置为“reflow”。
• 将表格标签的类别设置为table-stripe 、 table-stroke 、 ui-responsive 。
• ui-responsive类将使表格响应。
• table-stripe和table-stroke赋予桌子斑马条纹效果。
• 使用 thead 标签和 th 标签创建列名。
• 使用 body 标签添加表的数据。
• 行是使用 tr 标签创建的。

例子：

HTML

  

  
  
  
  
  
    

  

  GeeksforGeeks
  Table data in stripes and strokes
  
  

                                                                                                                                                                                                                                         

Course Name	Instructor	Course fee
D.S.A	Mohan	4500
D.B.M.S	Rahul	2500
O.S	Rohan	3500
C.Networks	Sandeep	2500

  

---

输出：