espandere un campo(testo) di una tabella

[italo_anonimo]

ciao ragazzi, vorrei sapere come posso fare per rendere solo un "campo di testo" espansibile, cioè che quando faccio click su "+" o "continua a leggere" o su un icona in automatico si autoespanda quel campo

per esempio, mia tabella con 2 colonne (tipo attività, descrizione attività) il 90% delle volte il campo "descrizione attività arriva a 260 caratteri o di più" e quando la vedo tabellata la colonna diventa enorme, come posso fare per mantenere le collone e righe con le stesse dimensione (margine uguali) e "mettere" un "+" o "continua a leggere" o un icona per ogni singolo campo/casella per farsi che al click si espanda???

<table class="hovertable">
         <thead>
           <tr>
                <th>tipo attivita</th>
                <th>descrizione attivita</th>
          </tr>
         </thead>
         <tbody> 
                   <?php
                while ($row_Q = mysql_fetch_array($sql_Q,MYSQL_BOTH))
                 {
                         ?>
 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
          <td><?php echo $row_Q["atti_tipo"]; ?></td>
          <td><?php echo $row_Q["atti_descrizione"]; ?></td>
    </tr> 
                     <?php
 }
 ?>
         </tbody>
        </table>

grazie in anticipo.

[cavicchiandrea]

A scopo didattico ho fatto questo utilizzando jquery e css vedi se ti va bene, è abbastanza semplice pertanto non dovresti avere difficoltà.

[italo_anonimo]

A scopo didattico ho fatto questo utilizzando jquery e css vedi se ti va bene, è abbastanza semplice pertanto non dovresti avere difficoltà.

ciao cavicchiandrea grazie per rispondere, effettivamente è quello che cerco, nel mio caso ho provato a mettere

<td class="celle"><div class="txtlimit"><?php echo $row_Q["atti_descrizione"]; ?></div>      <div class="puntini">....</div>    <div class="continua">+</div></td>

al momento mi fa vedere il segno "+" , parte già ingrandito, il campo parte con tutta la lunghezza, non torna a capo.

grazie in anticipo

Saluti

[cavicchiandrea]

L'inclusione alla libreria jquery e i relativi css alle classi l'hai messi nella pagina? Se i problemi persistono metti un link alla pagina demo pubblica

[italo_anonimo]

ciao, tutto bene, funziona correttamente, click sul + è si espande (lascia troppo spazio vuoto), sul - è ritorna normale, il problema è nella tabella che (non il tuo codice) non è fissa, e quindi si allarga in automatico, disalienando le colonne, in che maniera posso rendere le colonne/campi fissi/bloccati e non avere troppo spazio vuoto quando espando il campo?? non ho una pagina pubblica, tutto in locale, grazie ancora per il codice, utilissimo.

allego due immagini , la prima, mantiene i campi con le stesse dimensioni, la secondo con lo spazio vuoto, suggerimenti???

grazie ancora.

[cavicchiandrea]

La soluzione e impostare la larghezza e altezze fisse, puoi possono esserci altre soluzioni ma sarebbero complesse che richiedono tempo e prove, vedi se hai voglia di provarci

[italo_anonimo]

ciao, grazie per la risposta, ho eseguito il tuo codice nuovamente con calma e sono riuscito ad adattarlo al mio, (non presenta più lo spazio in fondo al momento di espandere) adesso vorrei chiederti in che maniera posso "alienare" in automatico la riga quando c'è (poco testo) spazio fra l'ultima parola e l'inizio dei "puntini ...." ??






grazie in anticipo
Saluti

[cavicchiandrea]

E' molto simile al problema precedente anche i puntini (che comunque volendo puoi togliere) lavorano su posizioni fisse (vedi classe), pertanto forse puoi adottare lo stessa soluzione dello spazio eccedente.