Novice Tutorial -- Learn not just technology, but dreams!
Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks
jQuery Mobile Tutorial
jQuery Mobile Tutorial
jQuery Mobile Introduction
jQuery Mobile Installation
jQuery Mobile Pages
jQuery Mobile Transitions
jQuery Mobile Buttons
jQuery Mobile Button Icons
jQuery Mobile Popups
jQuery Mobile Toolbars
jQuery Mobile Navbars
jQuery Mobile Panels
jQuery Mobile Collapsibles
jQuery Mobile Tables
jQuery Mobile Grids
jQuery Mobile Lists
jQuery Mobile Listviews
jQuery Mobile List Content
jQuery Mobile Filter
jQuery Mobile Forms
jQuery Mobile Form Basics
jQuery Mobile Form Inputs
jQuery Mobile Form Selects
jQuery Mobile Form Sliders
jQuery Mobile Themes
jQuery Mobile Themes
jQuery Mobile Events
jQuery Mobile Events
jQuery Mobile Touch Events
jQuery Mobile Scroll Events
jQuery Mobile Orientation Change Events
jQuery Mobile Examples
jQuery Mobile Data Attributes
jQuery Mobile Icons
jQuery Mobile Events
jQuery Mobile Page Events
jQuery Mobile CSS Classes
jQuery Mobile Collapsibles
jQuery Mobile Grids
Deep Dive
Scripting Languages
Development Tools
Scripts
Computer Science
Web Services
Programming
Web Design & Development
Web Service
Programming Languages
Software
jQuery Mobile Tables
Responsive Tables
Responsive design is generally used to adapt to users' various mobile devices.
We only need to use a simple class name, and jQuery Mobile can automatically adjust the page content according to the screen size.
Responsive tables allow page content to adapt well on both mobile and desktop devices.
There are two types of responsive tables: reflow and column toggle.
Reflow Tables
The reflow model table is displayed horizontally when the screen size is large enough, and when the screen size becomes small enough, all data will be displayed vertically.
To create a table, add the data-role="table" and "ui-responsive" class on the
element:
Example
Try it »
For responsive tables, you must include and elements.
Do not use rowspan or colspan attributes; these two attributes are not supported in responsive tables.
Column Toggle
The column toggle model hides data when there is not enough width.
The column toggle table is created as follows:
By default, jQuery Mobile will hide the columns on the right side of the table first. However, you can specify the order of hidden columns by adding the data-priority attribute in the table header (| ). The value of data-priority can be from 1 (highest priority) to 6 (lowest priority):
| I will never be hidden |
I am a very important column - I will not be hidden |
I am an important column - I might be hidden |
I am a less important column - I will be hidden first |
If you do not specify a priority for a column, the column will always be present and will not be hidden.
Combine the two pieces of code above to create a column toggle table, so that users can customize which columns of the table to hide:
Example
| CustomerID |
CustomerName |
ContactName |
Address |
City |
PostalCode |
Country |
| 1 |
Alfreds Futterkiste |
Maria Anders |
Obere Str. 57 |
Berlin |
12209 |
Germany |
Try it »
We can use the data-column-btn-text attribute to modify the text for toggling the table columns:
Example
Try it »
Table Styling
We use the "ui-shadow" class to add shadows to the table:
Add Shadow
Try it »
Use CSS to further style the table:
Add bottom border to all rows
tr {
border-bottom: 1px solid #d6d6d6;
}
Try it »
Add buttons to | elements and add background to even rows
th {
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
Try it »
jQuery Mobile Collapsibles
jQuery Mobile Grids
ByteArk Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, etc., official direct supply, stable and reliable.
Configuration Guide
¥9.9
/ month
Activate Now
iFlytek Xingchen Coding Plan
Includes free model invocation quotas, DeepSeek, GLM, Kimi, MiniMax, a one-stop experience and deployment platform.
Configuration Guide
¥3.9
/ month
Activate Now
Click me to share notes
Category Navigation
Python / Data Science
AI / Intelligent Development
Front-end Development
Back-end Development
Database
Mobile Development
DevOps / Engineering
Programming Languages
Computer Basics
XML / Web Service
.NET
Website Construction
Advertisement
jQuery Mobile Tutorial
jQuery Mobile Tutorial
jQuery Mobile Introduction
jQuery Mobile Installation
jQuery Mobile Pages
jQuery Mobile Transitions
jQuery Mobile Buttons
jQuery Mobile Button Icons
jQuery Mobile Popups
jQuery Mobile Toolbars
jQuery Mobile Navbars
jQuery Mobile Panels
jQuery Mobile Collapsibles
jQuery Mobile Tables
jQuery Mobile Grids
jQuery Mobile Lists
jQuery Mobile Listviews
jQuery Mobile List Content
jQuery Mobile Filter
jQuery Mobile Forms
jQuery Mobile Form Basics
jQuery Mobile Form Inputs
jQuery Mobile Form Selects
jQuery Mobile Form Sliders
jQuery Mobile Themes
jQuery Mobile Themes
jQuery Mobile Events
jQuery Mobile Events
jQuery Mobile Touch Events
jQuery Mobile Scroll Events
jQuery Mobile Orientation Change Events
jQuery Mobile Examples
jQuery Mobile Data Attributes
jQuery Mobile Icons
jQuery Mobile Events
jQuery Mobile Page Events
jQuery Mobile CSS Classes
Online Examples
·HTML Examples
·CSS Examples
·JavaScript Examples
·Ajax Examples
·jQuery Examples
·XML Examples
·Java Examples
Character Sets & Tools
· HTML Character Set Settings
· HTML ASCII Character Set
· JS Obfuscation/Encryption
· PNG/JPEG Image Compression
· HTML Color Picker
· JSON Formatting Tool
· Random Number Generator
Latest Updates
· AI Agent
· AI Evaluation and Security Research
· AI System Architecture
· Frontier Research Trends
· NLP Advanced Technology
· Computer Vision AI
· Deep Learning Basics
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Bookmark Article
Browsing History
Clear All
No records yet
|
YouTip