Stile prima colonna tabella

**sixdas** · 04-07-2016, 11:47

Buongiorno ho un problema con lo stile della prima colonna di una tabella. Io utilizzo questa regola css

codice:

# td:first-child {
    color: red !important;
    text-align: left !important;
    padding-left: 10px !important;
}

Tutto funziona correttamente, ma se tipo ho un unione di celle, la colonna successiva viene considerata la prima. Come potrei risolvere?

Faccio un esempio pratico:

**ResianTaxidrive** · 04-07-2016, 15:36

Secondo me potresti modificare il selettore così:

codice:

td:first-child[rowspan]

e anche quando la tabella è normale mettere

codice:

<td rowspan="1">testo</td>

**sixdas** · 04-07-2016, 16:51

Ciao, ho provato ma il problema che io faccio salvare la tabella tramite ckeditor, quindi quando l'utente salva il rowspan viene perso.

Io per avere un template sempre uguale della tabella, ho dato un template da utilizzare, cosi loro utilizzo sempre la stessa struttura:

<table>
<caption>
Tariffario
</caption>
<tbody>
<tr>
<th> </th>
<th>Titolo</th>
<th>Titolo</th>
</tr>
<tr>
<td>testo</td>
<td>trsto</td>
<td>testo</td>
</tr>
<tr>
<td>testo</td>
<td>testo</td>
<td>testo</td>
</tr>
</tbody>
</table>

**ResianTaxidrive** · 04-07-2016, 16:54

ma se il rowspan viene perso come fai a creare una tabella con la struttura che hai mostrato sopra?

**sixdas** · 04-07-2016, 17:04

io faccio inserire in modalità codice quella struttura che ho postato, poi l'utente se deve aggiungere righe o fare modifiche lo fa tramite la funzione di ckeditor (tasto destro)... Rifaccio un prova...

Ho fatto un ulteriore prova. Il problema non è che lo perde ma se l'utente aggiunge ulteriori righe il rowspan non viene incluso.

**ResianTaxidrive** · 04-07-2016, 19:34

Ma con la struttura che hai postato non verrà mai fuori quella tabella della seconda figura, o sbaglio?
Cioè, io ho usato un selettore con attributo rowspan perchè altrimenti non saprei come far venire fuori la tabella della seconda figura, a meno di non annidare più tabelle ma non mi pare il caso.

**sixdas** · 04-07-2016, 21:37

La struttura che ho postato e quella base, e fa venir fuori una tabella come la figura 1, ma l'utente potrebbe unire le celle rendendole come nella seconda figura con il rowspan.

PS: le tabelle delle foto sono fatte con word solo per esempio...

**ResianTaxidrive** · 04-07-2016, 22:03

Bene e poi hai scritto che al momento del salvataggio il rowspan viene perso quindi io deduco che l'utente non avrà mai la possibilità di fare una tabella come quella delle seconda figura. Almeno, questo è quello che capisco, forse mi perdo qualche pezzo?

**sixdas** · 04-07-2016, 22:48

Si, poi ho modificato il post, perchè ho fatto un ulteriore prova, in realtà non perde quello che inserito tramite la struttura che io fornisco, ma se provano ad aggiungere un ulteriore riga.

puoi fare una prova qui http://ckeditor.com/demo

**KillerWorm** · 05-07-2016, 03:21

Ciao, provo a darti due possibili soluzioni.

1 - Se il numero di colonne resta fisso (ad esempio 3, come sul tuo esempio) allora puoi usare il selettore :nth-last-child() indicando il numero della colonna da considerare, contando dall'ultima (quindi 3). Ovviamente si tratta di CSS3 ed ovviamente è necessario che il numero di colonne resti invariato su tutte le righe, cioè non funzionerà se all'interno di una riga ci sono celle unite con colspan.
Esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      table,td,th{
        border: 1px solid #000;
      }
      tr+tr>:nth-last-child(3){
        color: red;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        Tariffario
      </caption>
      <tbody>
        <tr>
          <th> </th>
          <th>Titolo</th>
          <th>Titolo</th>
        </tr>
        <tr>
          <td rowspan="2">testo</td>
          <td>testo</td>
          <td>testo</td>
        </tr>
        <tr>
          <td>testo</td>
          <td>testo</td>
        </tr>
        <tr>
          <td>testo</td>
          <td>testo</td>
          <td>testo</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

2 - Potresti modificare leggermente la struttura della tabella usando <th> per le celle della prima colonna, così da poterle selezionare facilmente da css. In tal caso CKEditor sembra funzionare perfettamente quando si inseriscono nuove righe, cioè la prima cella viene creata automaticamente come <th>, ed eventuali celle unite con rowspan sembra non diano alcun problema.
Esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      table,td,th{
        border: 1px solid #000;
      }
      tr+tr>th{
        font-weight: normal;
        color: red;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        Tariffario
      </caption>
      <tbody>
        <tr>
          <th> </th>
          <th>Titolo</th>
          <th>Titolo</th>
        </tr>
        <tr>
          <th rowspan="2">testo</th>
          <td>testo</td>
          <td>testo</td>
        </tr>
        <tr>
          <td>testo</td>
          <td>testo</td>
        </tr>
        <tr>
          <th>testo</th>
          <td>testo</td>
          <td>testo</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Discussione: Stile prima colonna tabella

Strumenti discussione

Ricerca discussione

Visualizza

Stile prima colonna tabella

Permessi di invio