[Risolto] Rendere tabella responsive

[sdenghete]

Ciao ragazzi,
vorrei rendere queste tabelle responsive ma non so come procedere. Chi può aiutarmi per favore?
grazie in anticipo! :-)

Codice: [Seleziona]

<?php 
$gold = getGoldPrice(); 
$prList = productData(); 
# ############################################# #
# COMMENTO: Inizio tabella 1: abcd #
# ############################################# #
echo '<table style="width: 940px; height: 50px;" border="1" cellpadding="0" cellspacing="0">
<thead> 
<tr>
<td style="border: 1px solid #d3d3d3; background-color: #FFFFFF; width: 840px;" align="center"><strong> [br /]</strong></td>
<td style="border: 1px solid #d3d3d3; background-color: #FFFFFF; width: 100px;" align="center"><strong> [br /]</strong></td>
</tr>
</thead> 
<tbody>
<tr>
<td style="border: 1px solid #d3d3d3; width: 840px;" align="center">'.$gold['date'].'</td>
<td style="border: 1px solid #d3d3d3; width: 100px;" align="center">'.round($gold['value'] ,3).'</td>
</tr>
</tbody>
</table>';
# ############################################# #
# COMMENTO: Fine tabella 1: abcd #
# ############################################# #


# COMMENTO: separatori #
echo '<p> </p>
<p> </p>
<p> </p>
<p> </p>';


# ############################################# #
# COMMENTO: Inizio tabella 2: defg #
# ############################################# #


echo '<div class="table-responsive"> <table style="width: auto; height: 50px;" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border: 1px solid #d3d3d3; background-color: #FFFFFF;" align="center"><strong>n</strong></td>
<td style="border: 1px solid #d3d3d3; background-color: #FFFFFF;" align="center"><strong>t</strong></td>
<td style="border: 1px solid #d3d3d3; background-color: #FFFFFF;" align="center"><strong>q</strong></td>
</tr>';
foreach ($prList as $cPr) {
echo '<tr>
<td style="border: 1px solid #d3d3d3;" align="center"><img src="'.$cPr['nazione'].'" border="0" width="25" height="25" /></td>
<td style="border: 1px solid #d3d3d3;" align="center">'.$cPr['nome'].'[br /]</td>
<td style="border: 1px solid #d3d3d3;" align="center">'.round($cPr['peso'] * $gold['value'],0).'[br /]</td>
</tr>';
}
echo '</tbody>
</table>';
# ############################################# #
# COMMENTO: Fine tabella 2: defg #
# ############################################# #


# COMMENTO: separatori #
echo '<p> </p>
<p> </p>
<p> </p>
<p> </p>';


?>


[tomtomeight]

Il tag code nel codice non nrlla descrizione. Grazie.

[tomtomeight]

Devi utilizzare le classi bootstrap. Se fai una ricerca di recente se ne è discusso.

[baronepiovasco]

Ciao, ma che template usi?

[sdenghete]

Ciao, uso ja Simone ;-)

[baronepiovasco]

Il template è studiato in modo da soddisfare la tua richiesta:

https://demo.joomforest.net/j3/jf_simone/elements/typography#bs_tables

[sdenghete]

Grazie, proverò a capirci qualcosa.. parto proprio da zero :-((

[baronepiovasco]

Scaricati dall'area download del template

JF Simone - Other Resources

In questa cartella zippata troverai una cartella Typography e dentro il file Typography.html
Aprilo con il tuo editor html preferito (io uso Notepad++)

Qui potrai leggere tutto il codice html da usare nelle tue pagine, ad esempio se cerchi Bootstrap - Tables troverai il codice per creare le tabelle che vedi in questa pagina:
https://demo.joomforest.net/j3/jf_simone/elements/typography#bs_tables
in automatico il template applicherà lo stile.

Spero di essere stato chiaro

[sdenghete]

Grazie.
ho seguito le tue istruzioni ed ora ho aperto il file Typography.html.
Ho scelto lo stile della tabella che voglio inserire ma qui arrivo..
Il fatto è che il codice che ho postato in questa discussione mi venne scritto tempo fa da un amico ma io sono a digiuno di queste cose.
Quindi sto provando a capire come agire..
Nel mio file la parte di codice inizia con echo e finisce con </table>';
devo sostituire tutta questa sezione con quella che ho scelto e dopo ovviamente personalizzarla?

[baronepiovasco]

Devi semplicemente sostituire la tabella html con quella scelta, a titolo puramente esemplificativo (non conoscendo come è stata studiata la cosa) ecco come potrebbe diventare il codice da te postato scegliendo la seconda tabella dell'esempio che trovi nella pagina Typography.

Ovvimente tu che vedi in tempo reale il risultato puoi correggere e migliorare eventuali imperfezioni.

Codice: [Seleziona]

<?php 
$gold = getGoldPrice(); 
$prList = productData(); 
# ############################################# #
# COMMENTO: Inizio tabella 1: abcd #
# ############################################# #
echo '<table class="table table-striped">
          <thead>
            <tr>
              <th><strong> [br /]</strong></th>
              <th><strong> [br /]</strong></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>'.$gold['date'].'</td>
              <td>'.round($gold['value'] ,3).'</td>
            </tr>
        </tbody>
        </table>';
# ############################################# #
# COMMENTO: Fine tabella 1: abcd #
# ############################################# #


# COMMENTO: separatori #
echo '<p> </p>
<p> </p>
<p> </p>
<p> </p>';


# ############################################# #
# COMMENTO: Inizio tabella 2: defg #
# ############################################# #


echo '<table class="table table-striped">
          <thead>
            <tr>
              <th>n</th>
              <th>t</th>
              <th>q</th>
            </tr>
          </thead>
          <tbody>';
foreach ($prList as $cPr) {
echo '<tr>
              <td><img src="'.$cPr['nazione'].'" border="0" width="25" height="25" /></td>
              <td>'.$cPr['nome'].'[br /]</td>
              <td>'.round($cPr['peso'] * $gold['value'],0).'[br /]</td>
            </tr>';
}
echo '</tbody>
</table>';
# ############################################# #
# COMMENTO: Fine tabella 2: defg #
# ############################################# #


# COMMENTO: separatori #
echo '<p> </p>
<p> </p>
<p> </p>
<p> </p>';


?>

[sdenghete]

Ciao,
ho fatto come mi hai indicato.
La prima tabella va bene, la seconda ancora no. cosa sto sbagliando? 

Codice: [Seleziona]

<?php 
  $gold = getGoldPrice(); 
  $prList = productData(); 
  # ############################################# #
  # COMMENTO: Inizio tabella 1: ab #
  # ############################################# #
  echo '<table class="table table-striped">
<thead> 
<tr>
<th><strong>a[br /]</strong></th>
<th><strong>b[br /]</strong></th>
</tr>
</thead> 
<tbody>
<tr>
<td>'.$gold['date'].'</td>
<td>'.round($gold['value'] ,3).'</td>
</tr>
</tbody>
</table>';
  # ############################################# #
  # COMMENTO: Fine   tabella 1: ab #
  # ############################################# #
  
# COMMENTO: separatori #
echo '<p> </p>
<p> </p>
<p> </p>
<p> </p>';

Codice: [Seleziona]

  # ############################################# #
  # COMMENTO: Inizio tabella 2: bcde    #
  # ############################################# #


  echo '<table class="table table-striped">
<thead>
<tr>
<th><strong>b</strong></th>
<th><strong>c</strong></th>
<th><strong>d</strong></th>
<th><strong>e</strong></th>
</tr>
</thead>
<tbody>';
  foreach ($prList as $cPr) {
echo '<tr>
<td><img src="'.$cPr['nazione'].'" border="0" /></td>
<td><img src="'.$cPr['url'].'" border="0" /></td>
<td>'.$cPr['nome'].'[br /]</td>
<td>'.round($cPr['peso'] * $gold['value'],0).'[br /]</td>
</tr>';
  }
echo '</tbody>
</table>';
  # ############################################# #
  # COMMENTO: Fine   tabella 2: bcde    #
  # ############################################# #


# COMMENTO: separatori #
echo '<p> </p>
<p> </p>
<p> </p>
<p> </p>';


?>

Ps: ho provato ad eliminare una colonna nella seconda tabella e adesso va quasi bene. Sul computer la tabella si adatta perfettamente mentre sul telefono messo in verticale la seconda tabella mostra alternativamente una riga che si riduce e l'altra no.... se metto il telefono in orizzontale la tabella è perfetta.

[baronepiovasco]

Sembra ci sia </tbody> </table> di troppo, prova:

Codice: [Seleziona]

# ############################################# #
  # COMMENTO: Inizio tabella 2: bcde    #
  # ############################################# #


  echo '<table class="table table-striped">
<thead>
<tr>
<th><strong>b</strong></th>
<th><strong>c</strong></th>
<th><strong>d</strong></th>
<th><strong>e</strong></th>
</tr>';
  foreach ($prList as $cPr) {
echo '<tr>
<td><img src="'.$cPr['nazione'].'" border="0" /></td>
<td><img src="'.$cPr['url'].'" border="0" /></td>
<td>'.$cPr['nome'].'[br /]</td>
<td>'.round($cPr['peso'] * $gold['value'],0).'[br /]</td>
</tr>';
  }
echo '</tbody>
</table>';
  # ############################################# #
  # COMMENTO: Fine   tabella 2: bcde    #
  # ############################################# #


# COMMENTO: separatori #
echo '<p> </p>
<p> </p>
<p> </p>
<p> </p>';


?>

[sdenghete]

   funziona.
L'ultima cosa, poi giuro che non do più fastidio. 
Ora i dati sono giustificati a sinistra, c'è modo di metterli centrati? Grazie

[baronepiovasco]

Devi personalizzare il tuo foglio di stile

Vai in Estensioni --> Template --> Lista Template --> Clicca su Jf_simone Details and Files

Nella lista cartelle a sinistra apri jf --> assets --> css --> jf_custom.css

qui incolli:

Codice: [Seleziona]

.table th, .table td{
   
    text-align: center;
   
}
Salva e chiudi.

Le tue personalizzazioni dei css vanno sempre qui.

Ricordati di mettere risolto alla fine! ^_^

[sdenghete]

davvero grazie per l'aiuto :-)