Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Formattazione tabella

  1. #1

    Formattazione tabella

    Salve.
    Avrei un piccolo quesito. Da CSS sto gestendo la formattazione di una tabella. Quello che mi serve però, non sono in grado di crearlo anche se a prima vista mi sembrava semplice

    La tabella è 2xn (n sarà definito più in la). "Semplicemente" vorrei:
    1 . Le colonne di sinistra devono avere allineamento a destra
    2 . Le colonne di destra devono avere allineamento a sinistra
    3 . La dimensione delle righe deve essere automatica per le colonne di sinistra (standard in pratica) e di lunghezza massima per le colonne di destra
    4 . Allineamento verticale centrato per tutte le celle (anche qui, nulla di che).
    5 . Deve essere presente SOLO il bordo verticale che divide le due colonne

    Posto un'immagine per essere più chiaro (le linee tratteggiate sono saranno visibili).


    Grazie mille.

  2. #2
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    
    <style type="text/css">
    .bordo_sinistro {
    	border-left-width: 2px;
    	border-left-style: solid;
    	border-left-color: #000;
    }
    </style>
    </head>
    
    <body>
    <table border="0" align="center" cellpadding="5" cellspacing="0">
      <tr>
        <td width="100" align="right" valign="middle">Nome</td>
        <td align="left" valign="middle" class="bordo_sinistro">Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto </td>
      </tr>
      <tr>
        <td width="100" align="right" valign="middle">Cognome</td>
        <td align="left" valign="middle" class="bordo_sinistro">Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi </td>
      </tr>
      <tr>
        <td width="100" align="right" valign="middle">Residenza </td>
        <td align="left" valign="middle" class="bordo_sinistro">Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso Via Meso </td>
      </tr>
      <tr>
        <td width="100" align="right" valign="middle">Altezza</td>
        <td align="left" valign="middle" class="bordo_sinistro">1.80</td>
      </tr>
      <tr>
        <td width="100" align="right" valign="middle">Peso</td>
        <td align="left" valign="middle" class="bordo_sinistro">70</td>
      </tr>
    </table>
    </body>
    </html>
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  3. #3
    Originariamente inviato da carlomarangoni
    Ti ringrazio, ma non è esattamente quello che cerco. La soluzione che vorrei utilizzare è TOTALMENTE CSS, ossia tutto sul tag table.

  4. #4
    Risolto in maniera ibrida.
    Ho fornito uno stile per le colonne di sinistra ed uno per le colonne di destra. Unico neo, va aggiunto codice ad ogni tag td.

  5. #5
    Originariamente inviato da _anthony_
    Risolto in maniera ibrida.
    Ho fornito uno stile per le colonne di sinistra ed uno per le colonne di destra. Unico neo, va aggiunto codice ad ogni tag td.
    Embè! Era il concetto che ti avevo suggerito con il mio codice che hai detto non ti andava!

    Perchè tu cosa volevi? Realizzarlo senza scrivere codice?
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  6. #6
    Sisi assolutamente

    Solo che non è cmq quello che cercavo
    Volevo fare tutto col tag table del css.

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Ciao,
    per TOTALMENTE CSS potresti usare la pseudo-classe :first-child, così da selezionare solo i td della prima colonna:
    codice:
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS - Formattazione tabella</title>
        
        <style type="text/css">
          table{
            border-collapse:collapse;
            font:10pt sans-serif;
          }
          td{
            border:1px dotted #69c;
            padding:0 10px;
          }
          td:first-child{
            border-right:1px solid #333;
            text-align:right;
          }
        </style>
      
      </head>
      <body>
        <table>
          <tr>
            <td>Nome</td>
            <td>Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto Alberto</td>
          </tr>
          <tr>
            <td>Cognome</td>
            <td>Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi Rossi</td>
          </tr>
          <tr>
            <td>Residenza</td>
            <td>Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo Via Messo</td>
          </tr>
          <tr>
            <td>Altezza</td>
            <td>1.80</td>
          </tr>
          <tr>
            <td>Peso</td>
            <td>70</td>
          </tr>
        </table>
      </body>
    </html>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Originariamente inviato da KillerWorm
    Ciao,
    per TOTALMENTE CSS potresti usare la pseudo-classe :first-child, così da selezionare solo i td della prima colonna:
    L'ho scoperto proprio stamattina. Stasera a caso provo. Grazie mille

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