[CSS] display:block in tabelle

**ale500** · 22-08-2003, 12:12

salver a tutti..

ho una tabella definita mediante i css ove all'interno di ogni cella vi è un collegamento...vorrei fare in modo che il collegamento prenda tutto lo spazio...ovvero...(a parole povere) che quando l'utente va sopra con il muose, sia alla cella sia al collegamento gli appare la manina (cursore) del collegamento.

in genere utilizzo a { display:block; } ma questa volta non so perchè mi funziona soltanto per la prima cella????

sapreste aiutarmi????grazie.

**Francis87** · 22-08-2003, 12:26

**ale500** · 22-08-2003, 12:39

no, forse non ci siamo capiti...in non devo reindirizzare una persona se clicca su una cella ma voglio che un collegamento occupi tutto lo spazio all'interno di una cella...questo si fa con display:block che serve appunto a far occupare ad una scritta (in questo caso ad un collegamento) tutto lo spazio disponibile...ma non so perchè tabella mi funzia solo con la prima cella...

aiuto...

:quipy:

**Francis87** · 22-08-2003, 12:41

si si ho capito ke devi fare ma cercavo una via diversa x arrivare allo stesso punto!

cmq posta il codicillo ke magari c'è qualcosa ke nn va!

**Shores** · 22-08-2003, 12:42

Potresti postare un link ad un esempio, o almeno il css per intero?

Ciao!

**ale500** · 22-08-2003, 14:51

codice:

<html>
<head>
<title>prova</title>
<style type="text/css">
a { display:block; }
</style>
</head>
<body>
<table>
<tr>
<td>Primo</td>
<td>Secondo</td>
<td>Terzo</td>
<td>Quarto</td>
</tr>
</table>
</body>
</html>

come potrete notare soltanto nella prima cella l'"effetto" display:block funziona...in tutte le altre no...

perché??????

**Shores** · 22-08-2003, 14:57

Forse perchè il display:block; serve a tutt'altro che non a quel che stai cercando di fare tu...

Display è una proprietà che non serve affatto a cambiare la DIMENSIONE di un tag, ma piuttosto come esso viene considerato nella costruzione del layout...

Quindi display non è affatto quel che tu pensi; spiegaci meglio a parole quale è l'effetto che vorresti ottenere e potremo sicuramente aiutarti.

Una prova che io farei è mettere i tag A esternamente ai tag td, hai provato?

**ale500** · 22-08-2003, 15:02

questo è il mio codice:

codice:

<style type="text/css">

a { color:#0000FF; }
a:visited { color:#0000FF; }
a:hover {
 color:#FFFF00;
 background-color:#0000FF;
 /* aqua=#FFFF00 */
}

table.menu1 { 
 display:table;
 table-layout:fixed; 
 /*height:10px;*/
 border:solid 1px #000000; 
 border-collapse:collapse; 
} 

table.menu1 tr { 
 display:table-row; 
} 

table.menu1 tr td { 
 display:table-cell; 
 border:solid 1px #000000; 
 margin-top:0px;
 margin-bottom:0px;
 padding:0 0 0 0;
} 

table.menu1 tr td a {
 text-decoration:none;
 font-family:Verdana, Serif, Arial;
 font-size:10px;
 text-align:center;
 margin-top:0px;
 margin-bottom:0px;
 display:block;
}

body {
 margin:0 0 0 0;
 padding:0 0 0 0;
 text-align:left;
}

#menu {
 position:absolute;
 top:10px;
 left:10px;
 padding:0 0 0 0;
 margin:0 0 0 0;
}

#opzioni {
 position:absolute;
 top:23px;/*10px altezza Txt 2px bordi 2px spazio*/
 visibility:hidden;
}
</style>

display:block serve a far occupare tutto lo spazio orizzontale ad un link...se al posto delle tabella utilizzo degli elenchi opportunamente formattati mi funzia ma con le tabella mi funzia soltanto la prima cella...

**Shores** · 22-08-2003, 15:13

Allora, ribadisco che display:block, non serve AFFATTO a quello per cui tu lo usi, tant'è che non sempre ti funziona:

http://www.w3.org/TR/CSS21/visuren.html#display-prop

Eccoti qui quello che vuoi tu:

codice:

<html>
<html>
<head>
<title>prova</title>
<style type="text/css">
a div {width:100%; height:100%}
</style>
</head>
<body>
<table border=1>
<tr>
<td width=100>Primo</td>
<td width=100><div>Secondo</div></td>
<td width=100>Terzo</td>
<td width=100>Quarto</td>
</tr>
</table>
</body>
</html>

**Shores** · 22-08-2003, 15:18

Ah, tieni anche presente che tutti i display:table-qualcosa non funzionano in IE, quindi puoi evitare di inserirli nel css, dato che se li usi su un tag che non è quello classico (per esempio provi a dare ad una div display:table-cell) il risultato è DISASTROSO in IE...

Discussione: [CSS] display:block in tabelle

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] display:block in tabelle

Permessi di invio