Tabelas Responsive
design responsivo é útil quando você deseja que o conteúdo da sua página web móvel para responder ao dispositivo do usuário, como o tamanho do ecrã e orientação.
Com um nome de classe simples, jQuery Mobile está ciente do tamanho da tela disponível do usuário e automaticamente se redimensiona para mostrar o conteúdo que é relevante para o usuário particular.
mesas Responsive nos permitem exibir um grande conjunto de dados tabulares que vai olhar atraente tanto para celulares e desktops.
Existem dois tipos de tabelas que respondem: refluxo e alternância coluna.
Tabela de Refluxo
O modo de refluxo posiciona os dados da tabela horizontalmente até que se atinge um tamanho mínimo, em seguida, todas as linhas são agrupadas verticalmente.
Criar uma tabela, adicione a data-role = "mesa" e uma classe de "ui-responsive" sobre o <table> elemento:
Para a mesa sensível a funcionar corretamente, você deve incluir os <thead> e <tbody> elementos.
Não use rowspan ou atributos colspan; eles não são suportados em tabelas responsivos.
Tabela Alternar coluna
O modo "toggle coluna" vai esconder colunas quando não há largura suficiente para exibir os dados.
Para criar uma tabela coluna de alternância, adicione o seguinte para o <table> elemento:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >Por padrão, o jQuery Mobile vai ocultar colunas do lado direito da tabela. No entanto, você tem permissão para especificar qual coluna que deve ser oculto ou mostrado em uma ordem específica. Adicione o atributo de prioridade de dados para cabeçalho da tabela (<th>) e especifique um número entre 1 (prioridade mais alta) a 6 (menor prioridade):
<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>Se você não especificar uma prioridade para a coluna, a coluna vai ser persistente e não está disponível para se esconder.
Junte tudo e você criou uma tabela coluna de alternância! Observe que o quadro adiciona automaticamente um botão no canto superior direito da tabela. Isso permite que o usuário escolher qual coluna para exibir na tabela:
Exemplo
<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>
Tente você mesmo " Para alterar o texto do botão tabela de alternância, use o atributo de texto de dados de btn-coluna:
Exemplo
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Tente você mesmo " Tabelas de estilo
Use a classe "ui-sombra" para adicionar sombras para a tabela:
Adicionar sombra
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Tente você mesmo " Para mais mesa de estilo, use CSS:
Adicionar um limite inferior para todas as linhas da tabela
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Tente você mesmo " Adicionar uma borda inferior a todos <th> elementos e uma cor de fundo para todas as linhas até mesmo de mesa
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Tente você mesmo "