Visualizzazione dei risultati da 1 a 5 su 5

Visualizzazione discussione

  1. #1

    Tabella in css: allineamento celle

    Buon tutto

    sto cercando di capire come fare una tabella DIV + CSS
    ed ho trovato questo generatore
    https://divtable.com/table-styler/

    il mio problema è che TUTTE le celle generate sono giustifica te in un unico verso, destra centro oppure sinistra...

    vorrei capire come fare per avere alcune celle a destra, altre in centro altre a sinistra... pre allineare etichette (a sinistra) codici (al centro) importi (a destra)

    mi potreste aiutare ?

    Grazie
    Flavio


    // HTML
    codice HTML:
    <div class="divTable blueTable">
    <div class="divTableHeading">
    <div class="divTableRow">
    <div class="divTableHead">head1</div>
    <div class="divTableHead">head2</div>
    <div class="divTableHead">head3</div>
    <div class="divTableHead">head4</div>
    </div>
    </div>
    <div class="divTableBody">
    <div class="divTableRow">
    <div class="divTableCell">cell1_1</div>
    <div class="divTableCell">cell2_1</div>
    <div class="divTableCell">cell3_1</div>
    <div class="divTableCell">cell4_1</div>
    </div>
    <div class="divTableRow">
    <div class="divTableCell">cell1_2</div>
    <div class="divTableCell">cell2_2</div>
    <div class="divTableCell">cell3_2</div>
    <div class="divTableCell">cell4_2</div>
    </div>
    <div class="divTableRow">
    <div class="divTableCell">cell1_3</div>
    <div class="divTableCell">cell2_3</div>
    <div class="divTableCell">cell3_3</div>
    <div class="divTableCell">cell4_3</div>
    </div>
    <div class="divTableRow">
    <div class="divTableCell">cell1_4</div>
    <div class="divTableCell">cell2_4</div>
    <div class="divTableCell">cell3_4</div>
    <div class="divTableCell">cell4_4</div>
    </div>
    </div>
    </div>
    <div class="blueTable outerTableFooter">
    <div class="tableFootStyle">
    <div class="links"><a href="#">&laquo;</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">&raquo;</a></div>
    </div>
    </div>

    // CSS
    codice:
    div.blueTable {
      border: 1px solid #1C6EA4;
      background-color: #EEEEEE;
      width: 100%;
      text-align: left;
      border-collapse: collapse;
    }
    .divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
      border: 1px solid #AAAAAA;
      padding: 3px 2px;
    }
    .divTable.blueTable .divTableBody .divTableCell {
      font-size: 13px;
    }
    .divTable.blueTable .divTableRow:nth-child(even) {
      background: #D0E4F5;
    }
    .divTable.blueTable .divTableHeading {
      background: #1C6EA4;
      background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
      background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
      background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
      border-bottom: 2px solid #444444;
    }
    .divTable.blueTable .divTableHeading .divTableHead {
      font-size: 15px;
      font-weight: bold;
      color: #FFFFFF;
      border-left: 2px solid #D0E4F5;
    }
    .divTable.blueTable .divTableHeading .divTableHead:first-child {
      border-left: none;
    }
    
    
    .blueTable .tableFootStyle {
      font-size: 14px;
      font-weight: bold;
      color: #FFFFFF;
      background: #D0E4F5;
      background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
      background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
      background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
      border-top: 2px solid #444444;
    }
    .blueTable .tableFootStyle {
      font-size: 14px;
    }
    .blueTable .tableFootStyle .links {
         text-align: right;
    }
    .blueTable .tableFootStyle .links a{
      display: inline-block;
      background: #1C6EA4;
      color: #FFFFFF;
      padding: 2px 8px;
      border-radius: 5px;
    }
    .blueTable.outerTableFooter {
      border-top: none;
    }
    .blueTable.outerTableFooter .tableFootStyle {
      padding: 3px 5px; 
    }
    /* DivTable.com */
    .divTable{ display: table; }
    .divTableRow { display: table-row; }
    .divTableHeading { display: table-header-group;}
    .divTableCell, .divTableHead { display: table-cell;}
    .divTableHeading { display: table-header-group;}
    .divTableFoot { display: table-footer-group;}
    .divTableBody { display: table-row-group;}
    Ultima modifica di KillerWorm; 11-12-2020 a 21:03 Motivo: inserito tag code

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 © 2025 vBulletin Solutions, Inc. All rights reserved.