Apertura specifiche

**riccardo1975** · 02-11-2013, 17:33

Ho una tabella del tipo:

<table width='200' border='1'>
<tr>
<td>Id</td>
<td><table width='200' border='1'> <tr>
<td>Id</td>
<td>Descrizione sintetica</td>
<td rowspan='3'>...</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Vorrei passando col mouse sul td dove stà la scritta "Descrizione sintetica", scomparisse quella descrizione e apparisse quella analitica e quando il td viene lasciato, tornasse la descrizione sintetica, ovviamente essendo attaccato verticalmente ad un'altro td, anche il secondo deve mostrare la descrizione sintetica e così via.

**cavicchiandrea** · 02-11-2013, 21:06

Dipende da dove recuperi i dati se sono sul server usi Ajax, oppure potrebbe bastare un array, e come generi la tabella troppo generico per essere più preciso, comunque l'operazione ha una difficoltà 5/6 per uno pratico di js se il livello cala si alza la difficoltà 7/8

**carlomarx** · 02-11-2013, 23:01

Davvero non so se ho capito quello che cerchi. Se ho però capito bene dovrebbe essere un gioco da ragazzi col solo CSS:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">

    /* LOGICA */

    table.la_mia_tabella tr[data-descr-less], table.la_mia_tabella tr[data-descr-more] {
        position: relative;
    }

    table.la_mia_tabella tr[data-descr-more] {
        cursor: help;
    }

    table.la_mia_tabella tr[data-descr-less]::after {
        content: attr(data-descr-less);
        position: relative;
        display: table-cell;
        left: 0;
        top: 0;
    }

    table.la_mia_tabella tr[data-descr-more]:hover::after {
        content: attr(data-descr-more);
    }

    /* ESTETICA */

    /* Riga d'ntestazione */

    table.la_mia_tabella th {
        border: 1px #aaaaaa solid;
        border-radius: 10px;
        background-color: #cccccc;
        padding: 12px;
        color: #000000;
        font-size: 14px;
        font-weight: bold;
    }

    /* Righe comuni */

    table.la_mia_tabella td, table.la_mia_tabella tr[data-descr-less]::after {
        width: 200px;
        border: 1px #aaaaaa solid;
        border-radius: 10px;
        background-color: #ffffcc;
        padding: 12px;
        color: #000000;
        font-size: 14px;
    }

</style>
</head>

<body>

<table class="la_mia_tabella">
<thead>
<tr><th>Id</th><th>Nome</th><th>Cognome</th><th>Descrizione</th></tr>
</thead>
<tbody>
<tr data-descr-less="Esempio di descrizione breve […]" data-descr-more="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis, sapien sed cursus placerat, felis orci bibendum mauris, eget lobortis dolor diam quis libero. Nam dignissim porta massa, sed consequat lacus vestibulum at. Curabitur sed justo pulvinar, semper ipsum et, luctus metus. Quisque eget iaculis lectus. Etiam lobortis lacus ac sem mollis, ac consequat lectus lobortis. Donec et ornare dui, sit amet congue enim. Nunc consectetur pellentesque iaculis. Nunc quis vehicula est. Mauris ac erat bibendum, sodales metus non, molestie urna. Donec mattis purus bibendum ipsum luctus faucibus. Aliquam eu enim eget sapien congue eleifend sit amet non erat. Etiam erat turpis, dignissim quis dolor eu, placerat feugiat mi. Aliquam et scelerisque elit. Nulla lacus mauris, pellentesque ac ante vel, venenatis adipiscing sapien. Mauris et molestie libero.">
<td>0</td>
<td>Mario</td>
<td>Rossi</td>
</tr>
<tr data-descr-less="Esempio di descrizione breve […]" data-descr-more="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis, sapien sed cursus placerat, felis orci bibendum mauris, eget lobortis dolor diam quis libero. Nam dignissim porta massa, sed consequat lacus vestibulum at. Curabitur sed justo pulvinar, semper ipsum et, luctus metus. Quisque eget iaculis lectus. Etiam lobortis lacus ac sem mollis, ac consequat lectus lobortis. Donec et ornare dui, sit amet congue enim. Nunc consectetur pellentesque iaculis. Nunc quis vehicula est. Mauris ac erat bibendum, sodales metus non, molestie urna. Donec mattis purus bibendum ipsum luctus faucibus. Aliquam eu enim eget sapien congue eleifend sit amet non erat. Etiam erat turpis, dignissim quis dolor eu, placerat feugiat mi. Aliquam et scelerisque elit. Nulla lacus mauris, pellentesque ac ante vel, venenatis adipiscing sapien. Mauris et molestie libero.">
<td>1</td>
<td>Camillo</td>
<td>Bianchi</td>
</tr>
<tr data-descr-less="Esempio di descrizione breve […]" data-descr-more="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis, sapien sed cursus placerat, felis orci bibendum mauris, eget lobortis dolor diam quis libero. Nam dignissim porta massa, sed consequat lacus vestibulum at. Curabitur sed justo pulvinar, semper ipsum et, luctus metus. Quisque eget iaculis lectus. Etiam lobortis lacus ac sem mollis, ac consequat lectus lobortis. Donec et ornare dui, sit amet congue enim. Nunc consectetur pellentesque iaculis. Nunc quis vehicula est. Mauris ac erat bibendum, sodales metus non, molestie urna. Donec mattis purus bibendum ipsum luctus faucibus. Aliquam eu enim eget sapien congue eleifend sit amet non erat. Etiam erat turpis, dignissim quis dolor eu, placerat feugiat mi. Aliquam et scelerisque elit. Nulla lacus mauris, pellentesque ac ante vel, venenatis adipiscing sapien. Mauris et molestie libero.">
<td>2</td>
<td>Lucia</td>
<td>Giannelli</td>
</tr>
</tbody>
</table>

</body>
</html>

P.S. Se dovessi avere problemi sostituisci ::after (sintassi HTML5) con :after (sintassi HTML4). Insomma, leva un paio di due punti.

**riccardo1975** · 03-11-2013, 13:32

bè adesso provo (bimba permettendo), grazie.

**riccardo1975** · 05-11-2013, 19:12

Bello il layout ma per uniformarmi il più vicino possibile al mio, ho semplificato in questo modo.

Necessito però di delucidazioni:

Una di carattere puramente informativo: visualizzo una colonna senza che ci sia un'istruzione <td> corrispondente, temo non sia un'errore, non conoscendo css, ma il fatto mi sconvolge un po'.
L'altra e ultima di carattere invece, più concreto: a me servirebbe che montando sulla sola colonna in questione, si aprisse la descrizione completa e non sull'intero rigo. Per il resto è micidiale, è esattamente quello che volevo.

**riccardo1975** · 06-11-2013, 01:33

Più o meno a caso, ma ho risolto così:

**riccardo1975** · 08-11-2013, 13:57

Non mi funziona con Explorer (8), e ho bisogno che funzioni anche con quello

, avete idea del perchè?

**cavicchiandrea** · 08-11-2013, 14:09

Originariamente inviata da riccardo1975

Non mi funziona con Explorer (8), e ho bisogno che funzioni anche con quello

, avete idea del perchè?

html5 e css3 non supportati da IE8 vedi se questo http://www.dozarte.com/wordpress/201...plorer-67-e-8/ può aiutarti

Discussione: Apertura specifiche

Strumenti discussione

Ricerca discussione

Visualizza

Apertura specifiche

Permessi di invio