HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Responsive design is generally used to adapt the user a variety of mobile devices.
We only need to use a simple class name, jQuery Mobile will automatically adjust the content of the page according to the size of the screen.
Responsive form to the page content on mobile and desktop devices to end a good adaptation.
Responsive table there are two types: reflow (reflux) and column switching.
Reflux model form sufficiently large screen size is displayed horizontally, while the screen size is small enough, all the data will become vertically.
Create a table in the <table> element to add data-role = "table" and "ui-responsive" category:
For the responsive form, you must include the <thead> and <tbody> element. Do not use rowspan or colspan attribute; responsive table is not supported by these two properties. |
Column switching model will be hidden when the data width is not enough.
Create a table column mode switch is as follows:
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
By default, jQuery Mobile will first hide the column to the right of the table. However, you can specify the order of columns hidden by adding data-priority attribute in the table head (<th>), data-priority value can be from 1 (highest priority) to 6 (lowest priority):
<th>I will never be hidden</th> <th data-priority="1">我是非常重要的列 - 我不会被隐藏</th> <th data-priority="3">我是重要的列 - 我可能被隐藏</th> <th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>
If you do not specify the priority is not listed, then the column will always exist and will not be hidden. |
The combination of the above two pieces of code together to create a column switching table, so that users can customize which columns you want to hide the table:
We can use the data-column-btn-text attribute to modify the switch table text:
We use "ui-shadow" class to add a shadow to the table:
Use CSS to further set the table style: