Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    Allineamento colonne tabella html5

    Salve volevo capire perché da foto allegata le ultime tre colonne della mia tabella non si allineano con l'intestazione . La tabella é in parte creata in HTML ed in parte popolata dinamicamente con JavaScript. E sono proprio quelle che aggiungo dinamicamente che mi rimangono tutte e tre sotto una sola cella d'intestazione.Screenshot_20191024_031837_com.android.chrome_compress99.jpg

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,479
    Ciao, si dice che a volte un'immagine valga più di mille parole... ma non è questo il caso

    Da quella sola immagine non è possibile chiarire con precisione le cause del problema; è presumibile che ci sia qualcosa di sbagliato nel codice (tag chiusi male o altro che va a sfasciare la struttura della tabella) ma si possono giusto fare delle ipotesi.

    Sarebbe utile, se non indispensabile, postare un po' di codice (o meglio, se possibile, il link della pagina in questione) per capire come viene creata e modificata quella tabella.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Grazie per la risposta adesso allego qualcosa in più
    codice:
      <table id="squadre" style="border:solid;width:300px" class="tabella">
      
        <thead>
       <colgroup span="4" width="400px" background-colour="orange"></colgroup>
        <tr style="background-color:orange">
         <th style="border:solid;width:200px">Squadra</td>
        <th id="nome_squadre" style="border:solid"></td>
        <th style="border:solid;width:600px"></td>
         <th style="border:solid"></td>
        </tr >
        <tr style="background-color:yellow">
        <th style="border:solid">Ruolo</td>
      <th style="border:solid" id="nome">Nome</td>
      <th style="border:solid">Squadra</td>
     <th style="border:solid">Quotazione</td>
        </tr>
         </thead>
         
       <tbody id="body" style="border:solid"> 
    
       <tr id="portieri"><td style="border:solid">Portieri</td></tr>
        <tr id="difensori"><td style="border:solid">Difensori</td></tr>
        <tr id="centrocampisti"><td style="border:solid">Centrocampisti</td></tr>
        <tr id="attaccanti"><td style="border:solid">Attaccanti</td></tr>
      </tbody> 
       </table>
    var riga= document.createElement("tr");
    //var riga=document.getElementById(g)
    //var riga_ruolo=document.crea teElement("tr")
    var cella= document.createElement("td");
    var cella1=document.createElement("td")
    var cella2=document.createElement("td")
    cella.style.border="solid";

    cella1.style.border="solid";

    cella2.style.border="solid";



    cella.innerText=ruol[u][1];
    cella1.innerText=ruol[u][2]
    cella2.innerText=ruol[u][4]
    riga.appendChild(cella);
    riga.appendChild(cella1);
    riga.appendChild(cella2);
    posizione.appendChild(riga)

  4. #4
    codice:
     var riga= document.createElement("tr");
        //var riga=document.getElementById(g)
      //var riga_ruolo=document.crea teElement("tr")
       var cella= document.createElement("td");
       var cella1=document.createElement("td")
       var cella2=document.createElement("td")
       cella.style.border="solid";
      
       cella1.style.border="solid";
      
       cella2.style.border="solid";
      
      
       
       cella.innerText=ruol[u][1];
       cella1.innerText=ruol[u][2]
       cella2.innerText=ruol[u][4]
       riga.appendChild(cella); 
       riga.appendChild(cella1);
       riga.appendChild(cella2);
       posizione.appendChild(riga)

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,479
    Manca del codice per capire bene; quella roba va dentro un ciclo???
    codice:
    posizione.appendChild(riga)
    Cos'è esattamente "posizione"? Presumo si tratti delle righe già esistenti, cioè quelle relative al ruolo.

    In tal caso non puoi inserire un <tr> direttamente dentro un altro <tr>. Considera che ogni tabella deve rispettare una struttura ben precisa che di base è <table><tr><td>...</td></tr></table>.

    Ad occhio ti direi che puoi risolvere applicando opportunamente l'attributo rowspan ai <td> laterali. Il valore di rowspan dovrà essere relativo al numero di righe che compongono i dati da inserire. A quel punto potrai creare le nuove righe a seguire con i relativi dati (vedi mio esempio sotto).

    In alternativa si potrebbero creare delle mini tabelle che dovranno essere inserite una per ogni cella in cui andranno i nuovi dati, ma la cosa rischia di diventare farraginosa in questo caso.


    Altri errori di validazione:
    codice:
        <thead>
       <colgroup span="4" width="400px" background-colour="orange"></colgroup>
    ...
         </thead>
    L'elemento <colgroup> deve essere un figlio diretto di <table>; non va posto dentro <thead>; eventualmente va messo prima.

    Personalmente farei a meno di usare tale elemento per formattare la tabella; ti consigli invece di fare uso dei CSS, magari definendo delle regole da includere nel documento (dentro <head>) e non in-linea nei tag della tabella.

    L'attributo background-colour non si può sentire; a parte l'errore ortografico (la u in più in colour) non esiste comunque un attributo HTML background-color (che tuttalpiù è una proprietà CSS), magari sarebbe possibile usare l'attributo bgcolor ma non è comunque consentito per questo elemento. Anche qui, sempre meglio usare il CSS, come poi hai fatto nei <tr> sotto, ma meglio includere lo stile nel documento ed evitare di sporcare i contenuti con style in-linea.

    Ancora, l'uso dell'attributo width per il colgroup non è supportato in HTML5; usare il CSS.

    Analogamente la proprietà width, anche se applicata col CSS, non puoi definirla per le singole celle in questo modo:
    codice:
    <th style="border:solid;width:200px">
    infatti le celle, le relative righe e colonne, nonché l'intera tabella, normalmente si dimensionano in automatico in base ai loro contenuti. Certo, è possibile impostare comunque delle dimensioni, magari all'intera tabella o anche alle colonne, ma non come hai fatto tu. In alcuni casi è necessario applicare alla tabella la regola table-layout:fixed attraverso il CSS.

    Qui qualche pasticcio:
    codice:
    <th style="border:solid;width:200px">Squadra</td>
    nelle varie righe simili a questa, hai aperto un <th> ma poi hai usato </td> per la chiusura. Chiaramente va corretto; o utilizzi <th>...</th> o utilizzi <td>...</td>.

    Infine, di norma per tutte le righe di una tabella è necessario definire uno stesso numero di colonne, altrimenti avresti un codice non valido, come nel tuo caso. E' vero che i dati li stai inserendo dinamicamente, ma sarebbe comunque opportuno avere una struttura iniziale che sia valida.

    Per verificare la validità del codice ti consiglio l'uso di un validatore (ad esempio questo).

    Un ultimo consiglio: non capisco l'uso di quegli id che hai applicato ai vari elementi della tabella. Partendo dal fatto che un id deve essere univoco, in vista di avere magari diverse istanze di quella stessa tabella (in cui magari cambiano giusto i contenuti ma non la struttura base) sarebbe meglio usare delle classi se ti serve ad esempio fare riferimento, via script, ai vari elementi all'interno di una tabella; magari usare l'id solo nel tag principale <table> se ti serve distinguerlo da altre possibili istanze dello stesso tipo di tabella. Sono giusto dei consiglio.

    Qui quella che potrebbe essere la tabella di base:
    codice:
    <!DOCTYPE HTML>
    <html lang="it">
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style>
          .tabella-ruoli {
            table-layout: fixed;
            border-collapse: collapse;
            width: 800px;
            font: 14px sans-serif;
          }
          .tabella-ruoli .tabella-ruoli_nome {
            font-style: italic;
          }
          .tabella-ruoli,
          .tabella-ruoli th,
          .tabella-ruoli td {
            border: 1px solid Gray;
            padding: 3px;
          }
          .tabella-ruoli > thead > tr:nth-child(1){
            background-color: Orange;
          }
          .tabella-ruoli > thead > tr:nth-child(2){
            background-color: Yellow;
          }
          .tabella-ruoli > tbody th{
            background-color: WhiteSmoke;
          }
          .tabella-ruoli td:nth-child(2),
          .tabella-ruoli td:nth-child(3){
            text-transform: uppercase;
          }
        </style>
      </head>
      <body>
      
        <table id="squadre" class="tabella-ruoli">
          <thead>
            <tr>
              <th>Squadra</th>
              <th class="tabella-ruoli_nome" colspan="3"></th>
            </tr >
            <tr>
              <th>Ruolo</th>
              <th>Nome</th>
              <th>Squadra</th>
              <th>Quotazione</th>
            </tr>
          </thead>
          <tbody> 
            <tr class="tabella-ruoli_portieri">      <th>Portieri</th>      <td colspan="3"></td></tr>
            <tr class="tabella-ruoli_difensori">     <th>Difensori</th>     <td colspan="3"></td></tr>
            <tr class="tabella-ruoli_centrocampisti"><th>Centrocampisti</th><td colspan="3"></td></tr>
            <tr class="tabella-ruoli_attaccanti">    <th>Attaccanti</th>    <td colspan="3"></td></tr>
          </tbody> 
        </table>
        
      </body>
    </html>
    Chiaramente il problema in oggetto è ancora irrisolto perché ora bisogna capire come popolare la tabella; senza vedere il resto del tuo script non riesco a capire qual è la struttura dei dati in arrivo e quali criteri stai usando per trattarli e appiccicarli alla tabella; se puoi dare qualche altra indicazione posso provare ad abbozzare qualche riga di JavaScript.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  6. #6
    Grazie del tuo intervento. Ho risolto da me usando rowspan.

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,479
    Bene, mi fa piacere che tu sia riuscito autonomamente

    Nel frattempo ho provato a mettere giù un po' di script, posto una possibile soluzione, magari può tornare utile a qualcuno:
    codice:
    <!DOCTYPE HTML>
    <html lang="it">
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style>
          .tabella-ruoli {
            table-layout: fixed;
            border-collapse: collapse;
            width: 800px;
            max-width: 100%;
            font: 14px sans-serif;
          }
          .tabella-ruoli .tabella-ruoli_nome {
            font-style: italic;
          }
          .tabella-ruoli,
          .tabella-ruoli th,
          .tabella-ruoli td {
            border: 1px solid Gray;
            padding: 3px;
            text-align: center;
            word-break: break-all;
          }
          .tabella-ruoli > thead > tr:nth-child(1){
            background-color: Orange;
          }
          .tabella-ruoli > thead > tr:nth-child(2){
            background-color: Yellow;
          }
          .tabella-ruoli > tbody > tr[class] > *{
            border-top-width: 2px;
          }
          
          .tabella-ruoli > tbody th{
            background-color: WhiteSmoke;
          }
          
          .tabella-ruoli td:nth-of-type(1),
          .tabella-ruoli td:nth-of-type(2){
            text-transform: uppercase;
          }
        </style>
      </head>
      <body>
      
        <table id="squadre" class="tabella-ruoli">
          <thead>
            <tr>
              <th>Squadra</th>
              <th class="tabella-ruoli_nome" colspan="3"></th>
            </tr >
            <tr>
              <th>Ruolo</th>
              <th>Nome</th>
              <th>Squadra</th>
              <th>Quotazione</th>
            </tr>
          </thead>
          <tbody> 
            <tr class="tabella-ruoli_portieri">      <th>Portieri</th>      <td colspan="3"></td></tr>
            <tr class="tabella-ruoli_difensori">     <th>Difensori</th>     <td colspan="3"></td></tr>
            <tr class="tabella-ruoli_centrocampisti"><th>Centrocampisti</th><td colspan="3"></td></tr>
            <tr class="tabella-ruoli_attaccanti">    <th>Attaccanti</th>    <td colspan="3"></td></tr>
          </tbody> 
        </table>
        
        <script>
          function aggiornaTabellaRuoli(sel,nom,arr){
            var tabs = document.querySelectorAll(sel);
            for (let t = 0; t < tabs.length; t++) {
              let tab = tabs[t];
              tab.querySelector('.tabella-ruoli_nome').innerText = nom;
              let righeRuoli = {
                p: tab.querySelector('.tabella-ruoli_portieri')
               ,d: tab.querySelector('.tabella-ruoli_difensori')
               ,c: tab.querySelector('.tabella-ruoli_centrocampisti')
               ,a: tab.querySelector('.tabella-ruoli_attaccanti')
              }
              for (let r = 0; r < arr.length; r++) {
                let dat = arr[r];
                let rigaRuolo = righeRuoli[dat[0].toLowerCase()];
                if (!rigaRuolo) continue;
                let strTd = '<td>'+dat[1]+'</td><td>'+dat[2]+'</td><td>'+dat[3]+'</td>';
                if (rigaRuolo.querySelector('td:only-of-type')){
                  rigaRuolo.deleteCell(1);
                  rigaRuolo.insertAdjacentHTML('beforeend', strTd);
                } else {            
                  let tr = document.createElement('tr');
                  rigaRuolo.insertAdjacentHTML('afterend', '<tr>'+strTd+'</tr>');
                  rigaRuolo.querySelector('th').rowSpan++;
                }
              }
            }
          }
          
          aggiornaTabellaRuoli(
            '#squadre'
           ,'Alfa Team'
           ,[
              ['p','Handanovic','int',0]
             ,['d','Izzo','tor',0]
             ,['c','Chiesa','fio',0]
             ,['c','Milinkovic-Savic','laz',0]
             ,['d','Hateboer','ata',0]
             ,['a','Cristiano Ronaldo','juv',0]
             ,['p','Meret','nap',0]
             ,['d','Kalarov','rom',0]
             ,['a','Zapata D','ata',0]
             ,['a','Immobile','laz',0]
             ,['a','Belotti','tor',0]
             ,['d','N\'Koulou','tor',0]
             ,['c','Bernardeschi','juv',0]
             ,['d','Acerbi','laz',0]
             ,['c','Callejon','nap',0]
             ,['a','Higuain','juv',0]
             ,['p','Gollini','ata',0]
             ,['c','Under','rom',0]
             ,['a','Milik','nap',0]
             ,['c','Verdi','nap',0]
             ,['c','Kurtic','spa',0]
             ,['d','Alex Sandro','juv',0]
             ,['d','Mancini G','rom',0]
             ,['d','De Ligt','juv',0]
             ,['c','Bonaventura','mil',0]
            ]
          );
          
        </script>
       
      </body>
    </html>
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.