Tablas de respuesta
el diseño de respuesta es útil cuando se desea que el contenido de su página web móvil para responder al dispositivo del usuario, tales como su tamaño de pantalla y la orientación.
Con un nombre de clase simple, jQuery Mobile es consciente del tamaño de la pantalla que dispone el cliente y automáticamente cambia el tamaño en sí para mostrar el contenido que es relevante para ese usuario en particular.
tablas de respuesta nos permitirá mostrar un gran conjunto de datos tabulares que se verá atractiva tanto para los móviles y de escritorio.
Hay dos tipos de tablas de respuesta: reflujo y de palanca de la columna.
Tabla de reflujo
El modo de reflujo posiciona los datos de la tabla horizontalmente hasta que alcanza un tamaño mínimo, entonces todas las filas se agrupan verticalmente.
Crear una tabla, agregar la técnica de role = "mesa" y una clase de "ui-responsive" en la <table> elemento:
Para la tabla de respuesta para que funcione correctamente, debe incluir los <thead> y <tbody> elementos.
No utilice rowspan o atributos colspan; que no se admiten en las tablas de respuesta.
Columnas de la Tabla Toggle
El modo de "cambiar la columna" ocultará columnas cuando no hay suficiente ancho para mostrar los datos.
Para crear una tabla de columna de palanca, añada lo siguiente a la <table> elemento:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >De forma predeterminada, jQuery Mobile ocultar las columnas de la parte derecha de la tabla. Sin embargo, se le permite especificar qué columna que se deben ocultarse o mostrarse en un orden específico. Añadir el atributo de prioridad de los datos de cabecera de la tabla (<th>) y especifique un número entre 1 (prioridad más alta) a 6 (prioridad más baja):
<th>I
will never be hidden</th>
<th data-priority="1" >I
am very important - I will probably not be hidden</th>
<th data-priority="3" >I
am less important - I could be hidden</th>
<th
data-priority="5" >I am not that important - there is a good
chance that I will be hidden</th>Si no se especifica una prioridad para una columna, la columna será persistente y no está disponible para esconderse.
Ponerlo todo junto y usted ha creado una tabla de columna de palanca! Observe que el marco añade automáticamente un botón en la esquina superior derecha de la tabla. Esto permite al usuario elegir qué columna para que aparezca en la tabla:
Ejemplo
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >
<thead>
<tr>
<th
data-priority="6" >CustomerID</th>
<th>CustomerName</th>
<th data-priority="1" >ContactName</th>
<th data-priority="2" >Address</th>
<th
data-priority="3" >City</th>
<th
data-priority="4" >PostalCode</th>
<th
data-priority="5" >Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds
Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
Inténtalo tú mismo " Para cambiar el texto del botón tabla de palanca, utilice el atributo de datos de la columna-btn-texto:
Ejemplo
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Inténtalo tú mismo " Las tablas de estilo
Utilice la clase "ui-sombra" para añadir sombras a la mesa:
Añadir sombra
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Inténtalo tú mismo " Para más estilo tabla, utilice CSS:
Añadir un borde inferior de todas las filas de la tabla
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Inténtalo tú mismo " Añadir un borde inferior de toda <th> elementos y un color de fondo a todas las filas pares de mesa
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Inténtalo tú mismo "