Como fazer tabela responsiva [fechado]
Tenho uma tabela para representar alguns dados na minha página html. Estou a tentar tornar esta mesa tão sensível. Como posso fazer isto ?
Aqui está o ...Demo.
8 answers
Basicamente
Uma tabela sensível é simplesmente uma tabela de 100% de largura.
Pode montar a sua mesa com este CSS..table { width: 100%; }
Você poderá usar as pesquisas multimédia para mostrar/esconder / manipular as colunas de acordo com as dimensões dos ecrãs, adicionando uma classe (ou alvo usando nth-child, etc.):
@media screen and (max-width: 320px) {
.hide { display: none; }
}
HTML
<td class="hide">Not important</td>
Soluções mais avançadas
Se tiver uma tabela com muitos dados e quiser torná-lo legível em pequenos dispositivos de tela existem muitas outras soluções:
- css-tricks.com oferece Este artigo para o tratamento de grandes tabelas de dados.
- Zurb também encontrou este problema e resolveu-o usando javascript.
- os estábulos é um grande plugin jQuery que também o ajuda com este problema.
- Como postado por Elvin Arzumanoğlu esta é uma grande lista de exemplos .
Verifique as ligações abaixo para obter a tabela de resposta:
Http://css-tricks.com/responsive-data-tables/
Http://zurb.com/playground/responsive-tables
Http://zurb.com/playground/projects/responsive-tables/index.html
Se quiser controlar o td ' S / é como pode fazer com os elementos de nível de bloco e flutuadores: Não é possível. Não há maneira de fazer um td flutuar sobre ou sob um th.
Eu recomendo o plugin Wordpress Tabela de resposta liquidificador Mágico.
Para tornar a tabela responsiva, você pode fazer 100% de cada 'td' e inserir o título relacionado no 'td' no móvel(menos a largura '768px').
Ver Mais:
http://wonderdesigners.com/?p=227
Forma pura css de fazer uma tabela totalmente responsiva, não é necessário JavaScript. Demonstração de Checke aqui tabelas responsivas
<!DOCTYPE>
<html>
<head>
<title>Responsive Table</title>
<style>
/* only for demo purpose. you can remove it */
.container{border: 1px solid #ccc; background-color: #ff0000;
margin: 10px auto;width: 98%; height:auto;padding:5px; text-align: center;}
/* required */
.tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto;
background-color:green; height: auto; padding: 5px;}
/* only for demo purpose just for stlying. you can remove it */
table { font-family: arial; font-size: 13px; padding: 2px 3px}
table.responsive{ background-color:#1a99e6; border-collapse: collapse;
border-color: #fff}
tr:nth-child(1) td:nth-of-type(1){
background:#333; color: #fff}
tr:nth-child(1) td{
background:#333; color: #fff; font-weight: bold;}
table tr td:nth-child(2) {
background:yellow;
}
tr:nth-child(1) td:nth-of-type(2){color: #333}
tr:nth-child(odd){ background:#ccc;}
tr:nth-child(even){background:#fff;}
</style>
</head>
<body>
<div class="container">
<div class="tablewrapper">
<table class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Contact</td>
<td>Mobile</td>
<td>Office</td>
<td>Home</td>
<td>Residency</td>
<td>Height</td>
<td>Weight</td>
<td>Color</td>
<td>Desease</td>
<td>Extra</td>
<td>DOB</td>
<td>Nick Name</td>
</tr>
<tr>
<td>RN Kushwaha</td>
<td>[email protected]</td>
<td>--</td>
<td>Varanasi</td>
<td>-</td>
<td>999999999</td>
<td>022-111111</td>
<td>-</td>
<td>India</td>
<td>165cm</td>
<td>58kg</td>
<td>bright</td>
<td>--</td>
<td>--</td>
<td>03/07/1986</td>
<td>Aryan</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Para fazer uma tabela sensível, você pode fazer a largura de cada {[[0]} 100% e inserir um título relacionado no td em navegadores móveis (que são menos de 768px Largura.)
http://www.quizexpo.com/list-of-banks-in-india/