Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Tabella

  1. 06-07-2015, 14:11 #1
    Valeria89
    Valeria89 non è in linea
    Utente di HTML.it L'avatar di Valeria89
    Registrato dal
    Apr 2015
    residenza
    Pisa
    Messaggi
    129

    Tabella

    Cattura.jpg
    Ho questa tabella, la parte arancione e la parte gialla sono fisse, metre la parte bianca varia in base ai record presenti nel database. Vorrei che le celle bianche della tabella si espandessero occupando tutta la parte grigia, non vorrei utilizzare "colspan" ma vorrei che dinamicamente le celle si espandessero o restingessero, occupando tutto lo spazio disponibile. Esiste un modo per gestire i tag <td> senza "colspan"?
    Rispondi quotando Rispondi quotando
  2. 06-07-2015, 14:44 #2
    lucavizzi
    lucavizzi non è in linea
    Moderatore di Javascript L'avatar di lucavizzi
    Registrato dal
    Mar 2007
    Messaggi
    3,116
    Quote Originariamente inviata da Valeria89 Visualizza il messaggio
    Esiste un modo per gestire i tag <td> senza "colspan"?
    La risposta è no. Nella stessa tabella, allargando una cella allargherai tutta la colonna.
    Bisognerebbe trovare modi alternativi di esporre i dati e valutare se usare il tag table o meno, anche se si tratta di dati tabellari quindi la scelta di base dovrebbe essere corretta.
    Rispondi quotando Rispondi quotando
  3. 06-07-2015, 14:50 #3
    Valeria89
    Valeria89 non è in linea
    Utente di HTML.it L'avatar di Valeria89
    Registrato dal
    Apr 2015
    residenza
    Pisa
    Messaggi
    129
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    La risposta è no. Nella stessa tabella, allargando una cella allargherai tutta la colonna.
    Bisognerebbe trovare modi alternativi di esporre i dati e valutare se usare il tag table o meno, anche se si tratta di dati tabellari quindi la scelta di base dovrebbe essere corretta.
    Grazie mille
    Rispondi quotando Rispondi quotando
  4. 07-07-2015, 15:44 #4
    KillerWorm
    KillerWorm non è in linea
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Come accennato da lucavizzi, è possibile ad esempio usare dei div ed impaginarli in modo tabellare.
    Tuttavia, se vuoi mantenere le tabelle, una soluzione potrebbe essere quella di annidarle. Nel tuo caso potresti inserire una tabella per ogni ultimo td della tabella principale.

    Ti posto un esempio pratico da cui puoi prendere spunto. E' compreso anche di bordi arrotondati come chiedevi in altri post:
    codice:
    <!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #tabella_principale{
        border-spacing: 1px;
        border-radius: 15px;
        background: Grey;
      }
      #tabella_principale table{
        border-spacing: 0;
      }
      #tabella_principale>tbody>tr:first-child>td:last-child{
        border-radius: 0 13px 0 0;
      }
      #tabella_principale>tbody>tr:last-child>td:last-child{
        border-radius: 0 0 13px 0;
      }
      #tabella_principale td{
        padding: 0 4px;
      }
      #tabella_principale>tbody>tr>td:last-child{
        background: White;
        padding: 0 10px 0 0;
      }
      #tabella_principale td td:not(:last-child){
        border-right: 1px solid Grey;
      }
      #tabella_principale th{
        width: 150px;
        background: Orange;
        border-radius: 13px 0 0 13px;
      }
      #tabella_principale>tbody>tr>td:nth-of-type(1){
        width: 120px;
        background: Yellow;
      }
      #tabella_principale>tbody>tr>td:nth-of-type(2){
        width: 500px;
      }
      #tabella_principale td>table{
        width: 100%
      }
      #tabella_principale table td{
        background: transparent;
      }
    </style>
  </head>
  <body>
    <table id="tabella_principale">
      <tbody>
        <tr>
          <th rowspan="10">TAB</th>
          <td>A</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>B</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>C</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>D</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>E</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>F</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>G</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>H</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>I</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
              <td>Cinque</td>
              <td>Sei</td>
              <td>Sette</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>L</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
              <td>Cinque</td>
              <td>Sei</td>
              <td>Sette</td>
            </tr></table>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
    Rispondi quotando Rispondi quotando
  5. 07-07-2015, 16:05 #5
    Valeria89
    Valeria89 non è in linea
    Utente di HTML.it L'avatar di Valeria89
    Registrato dal
    Apr 2015
    residenza
    Pisa
    Messaggi
    129
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Come accennato da lucavizzi, è possibile ad esempio usare dei div ed impaginarli in modo tabellare.
    Tuttavia, se vuoi mantenere le tabelle, una soluzione potrebbe essere quella di annidarle. Nel tuo caso potresti inserire una tabella per ogni ultimo td della tabella principale.

    Ti posto un esempio pratico da cui puoi prendere spunto. E' compreso anche di bordi arrotondati come chiedevi in altri post:
    codice:
    <!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #tabella_principale{
        border-spacing: 1px;
        border-radius: 15px;
        background: Grey;
      }
      #tabella_principale table{
        border-spacing: 0;
      }
      #tabella_principale>tbody>tr:first-child>td:last-child{
        border-radius: 0 13px 0 0;
      }
      #tabella_principale>tbody>tr:last-child>td:last-child{
        border-radius: 0 0 13px 0;
      }
      #tabella_principale td{
        padding: 0 4px;
      }
      #tabella_principale>tbody>tr>td:last-child{
        background: White;
        padding: 0 10px 0 0;
      }
      #tabella_principale td td:not(:last-child){
        border-right: 1px solid Grey;
      }
      #tabella_principale th{
        width: 150px;
        background: Orange;
        border-radius: 13px 0 0 13px;
      }
      #tabella_principale>tbody>tr>td:nth-of-type(1){
        width: 120px;
        background: Yellow;
      }
      #tabella_principale>tbody>tr>td:nth-of-type(2){
        width: 500px;
      }
      #tabella_principale td>table{
        width: 100%
      }
      #tabella_principale table td{
        background: transparent;
      }
    </style>
  </head>
  <body>
    <table id="tabella_principale">
      <tbody>
        <tr>
          <th rowspan="10">TAB</th>
          <td>A</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>B</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>C</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>D</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>E</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>F</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>G</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>H</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>I</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
              <td>Cinque</td>
              <td>Sei</td>
              <td>Sette</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>L</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
              <td>Cinque</td>
              <td>Sei</td>
              <td>Sette</td>
            </tr></table>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
    Grazie mille, sei gentilissimo. Con internet explorer purtroppo non si vedono i bordi arrotondati.
    Rispondi quotando Rispondi quotando
  6. 07-07-2015, 20:26 #6
    KillerWorm
    KillerWorm non è in linea
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, presumo tu stia usando una versione di IE precedente alla 9, in tal caso border-radius non è supportato (assieme ad altre regole CSS3).
    Per gli angoli arrotondati potresti usare delle soluzioni alternative. Riporto quanto indicato in questa guida: http://www.html.it/pag/19451/border-radius/
    Sulle versioni precedenti alla 9.0 di Internet Explorer border-radius non è supportato. Per implementare gli angoli arrotondati sarà necessario ricorrere a soluzioni Javascript basate sui principali framework come jQuery o come i Nifty Corners di Alessandro Fulciniti.
    Non so quale sia il tuo target di utenza, nel caso dovresti valutare anche in base alle statistiche sull'utilizzo dei vari browser.
    http://gs.statcounter.com/#desktop-b...504-201506-bar

    Se una minima percentuale non vede gli angoli arrotondati, personalmente non me ne preoccuperei più di tanto.
    Vedi tu che fare.

    Mentre per le altre regole CSS3 non supportate (vedi :not e :nth-of-type) si potrebbe risolvere in modo relativamente semplice, se serve.




    PS: ti prego, non rispondere quotando ogni volta l'intero post se non è necessario. Grazie.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
    Rispondi quotando Rispondi quotando
  7. 07-07-2015, 21:43 #7
    KillerWorm
    KillerWorm non è in linea
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Posto il codice rivisto per le altre regole CSS3 non supportate dai vecchi browser, a parte gli angoli arrotondati su cui non ci perderei tempo.

    codice:
    <!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #tabella_principale{
        border-spacing: 1px;
        border-radius: 15px;
        background: Grey;
      }
      #tabella_principale table{
        border-spacing: 0;
      }
      #tabella_principale>tbody>tr:first-child>td:last-child{
        border-radius: 0 13px 0 0;
      }
      #tabella_principale>tbody>tr:last-child>td:last-child{
        border-radius: 0 0 13px 0;
      }
      #tabella_principale td{
        padding: 0 4px;
      }
      #tabella_principale td td{
        border-left: 1px solid Grey;
      }
       #tabella_principale td td:first-child{
        border-left: 0;
      }
      #tabella_principale th{
        width: 150px;
        background: Orange;
        border-radius: 13px 0 0 13px;
      }
      #tabella_principale>tbody>tr>td{
        width: 120px;
        background: Yellow;
      }
      #tabella_principale>tbody>tr>td~td{
        width: 500px;
        background: White;
        padding: 0 10px 0 0;
      }
      #tabella_principale td>table{
        width: 100%
      }
      #tabella_principale table td{
        background: transparent;
      }
    </style>
  </head>
  <body>
    <table id="tabella_principale">
      <tbody>
        <tr>
          <th rowspan="10">TAB</th>
          <td>A</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>B</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>C</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>D</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>E</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>F</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>G</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>H</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>I</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
              <td>Cinque</td>
              <td>Sei</td>
              <td>Sette</td>
            </tr></table>
          </td>
        </tr>
        <tr>
          <td>L</td>
          <td>
            <table><tr>
              <td>Uno</td>
              <td>Due</td>
              <td>Tre</td>
              <td>Quattro</td>
              <td>Cinque</td>
              <td>Sei</td>
              <td>Sette</td>
            </tr></table>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.