Formattazione tabella

**_anthony_** · 26-05-2012, 12:19

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.

**carlomarangoni** · 26-05-2012, 22:24

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>

**_anthony_** · 27-05-2012, 01:17

Originariamente inviato da carlomarangoni

Ti ringrazio, ma non è esattamente quello che cerco. La soluzione che vorrei utilizzare è TOTALMENTE CSS, ossia tutto sul tag table.

**_anthony_** · 27-05-2012, 23:28

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.

**carlomarangoni** · 27-05-2012, 23:56

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?

**_anthony_** · 27-05-2012, 23:59

Sisi assolutamente

Solo che non è cmq quello che cercavo

Volevo fare tutto col tag table del css.

**KillerWorm** · 28-05-2012, 00:39

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>

**_anthony_** · 28-05-2012, 09:55

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

Discussione: Formattazione tabella

Strumenti discussione

Ricerca discussione

Visualizza

Formattazione tabella

Permessi di invio