Come Inserire Una tabella in un sito responsive

[nemesis_85]

Salve ragazzi, ho necessità di inserire una tabella dentro un sito responsive, non posso fare una tabella con i div in percentuale, in quanto deve essere una tabella larga 500px, necessariamente.


Avete qualche soluzione in merito?

Grazie

[Vincent.Zeno]

se tu sai che DEVE essere larga 500px la domanda qual'è?

[carlomarangoni]

Salve ragazzi, ho necessità di inserire una tabella dentro un sito responsive, non posso fare una tabella con i div in percentuale, in quanto deve essere una tabella larga 500px, necessariamente.


Avete qualche soluzione in merito?

Grazie

Volendo si può fare anche una tabella con i div con larghezza fissa

[nemesis_85]

Ma facendo una tabella con i div fissi, poi quando si restringe la grafica, la tabella esce di fuori e sembra troppo brutto

[Vincent.Zeno]

se tu sai che DEVE essere larga 500px la domanda qual'è?

.

[Nobody33]

@nemesis

Avete qualche soluzione in merito?

Si, non lo fare 500px. Non esiste altra soluzione.

Contro-domanda: perché deve essere 500px in un sito responsive?

[nemesis_85]

@nemesis



Si, non lo fare 500px. Non esiste altra soluzione.

Contro-domanda: perché deve essere 500px in un sito responsive?

Perché non so come far entrare una tabella con 6 colonne in un sito responsive...

[Nobody33]

Perché non so come far entrare una tabella con 6 colonne in un sito responsive...

Diverse soluzioni:

1) Potresti utilizzare javascript:
Da qualche parte, in alto o in basso alla tabella fai due frecce che appaiono ad una certa risoluzione e, con le quali fai scorrere la tabella a sinistra/ destra di un tot di pixel. Tipo:

$('#bottone_dx').on('click',function() {
$('#div_tabella').animate({scrollLeft:'+=90'}, 600); //90 sono i pixel che deve scorrere la tabella e 600 è la velocità in ms
});
$('#bottone_sx').on('click',function() {
$('#div_tabella').animate({scrollLeft:'-=90'}, 600);
});

2) Altrimenti, con il rimpicciolire della risoluzione fai scomparire delle <td> non necessarie dentro le <tr>, il tutto senza misura fissa.

3) Metti tutto dentro dei normali div che sono più maneggevoli.

[nemesis_85]

Diverse soluzioni:

1) Potresti utilizzare javascript:
Da qualche parte, in alto o in basso alla tabella fai due frecce che appaiono ad una certa risoluzione e, con le quali fai scorrere la tabella a sinistra/ destra di un tot di pixel. Tipo:

$('#bottone_dx').on('click',function() {
$('#div_tabella').animate({scrollLeft:'+=90'}, 600); //90 sono i pixel che deve scorrere la tabella e 600 è la velocità in ms
});
$('#bottone_sx').on('click',function() {
$('#div_tabella').animate({scrollLeft:'-=90'}, 600);
});

2) Altrimenti, con il rimpicciolire della risoluzione fai scomparire delle <td> non necessarie dentro le <tr>, il tutto senza misura fissa.

3) Metti tutto dentro dei normali div che sono più maneggevoli.

mi potresti postare qualche post di esempi del javascript? in maniera di studiarmelo?

[Nobody33]

Il codice l'ho fatto ora. Non esiste nessun post per quello.

Spiegazione ancora + dettagliata:

1)Ti serve una libreria jquery.

2) $('#bottone_dx').on('click',function() {
//quando (.on) clicco ('click') sull'elemento (#bottone_dx), allora esegui questa funzione (function):
$('#div_tabella').animate({scrollLeft:'+=90'}, 600);
// anima (.animate) il "div_tabella", ovvero scrolla a destra (scrollLeft:'+=90') di 90 pixel alla velocità di 600 millisecondi

Non c'è molto altro da aggiungere/ commentare a questo codice.

Intanto puoi fare una prova, carica il tutto e posti il link.

EDIT:

Il codice va rinchiuso tra $(document).ready(function(){
//codice

}};

ovvero quando il documento (DOM) è pronto, esegui questa funzione.