Tabella e overflow nei Td

**ricman** · 13-03-2009, 14:17

Non sono esperto di tabelle... non le uso mai...

Ne ho una come sotto che non riesco a formattare...
Vorrei gestire la larghezza della colonne, facendo in modo che il testo non vada a capo, resti su una linea e quello che eccede venga "nascosto" dall'overflow:hidden.
Come provo ad agire sul css non ottengo nessuna modifica della larghezza!!
La tab viene creata dinamicamente da php e alcune cose non sono certo di modificarle, ma se la semantica non è perfetta non mi interessa in quanto la debbono utilizzare solo poche persone...

codice:

<table id="tabella1">
<thead>
	<tr>
		<th nowrap width="100%">Ragione Sociale </th>
		<th nowrap width="100%">Nominativo </th>
		<th nowrap width="1%">Email</th>
		<th nowrap width="1%">Categoria</th>
		<th nowrap width="1%">Provincia</th>
		<th nowrap width="1%">X</th>
		<th nowrap width="1%">X</th>
		<th nowrap width="1%">X</th>		
	</tr>
</thead>
<tbody>
	<tr class='tr_pari'>
		<td class="azienda">

Ciccio ciccio spa</p></td>
		<td class="nome">

Nando</p></td>
		<td class="email">info@cicciociccio.it</td>			
		<td class="categoria">Una categoria</td>
		<td class="provincia">Terni</td>
		<td width="1">xx</td>
		<td width="1">xx</td>
		<td width="1">xx</td>
	</tr>
</tbody>
</table>



#tabella1 {
	border: 1px solid silver;
}
#tabella1 th {
	background-color: #C8C8C8;
	padding: 0.3em;
	line-height: 1.3em;
}
#tabella1 td {
	height: 20px;
	line-height: 20px;
	padding: 0.2em;
	margin-right: 5px;
}

	#tabella1 td.azienda {
		width: 100px;
		overflow: hidden;
		padding: 0.2em 0.5em 0.2em 0.5em;
		font-size: 0.8em;
	}
		#tabella1 td.azienda p {
			width: 80%;
			white-space: nowrap;
			overflow: hidden;
			margin: 0; padding: 0;
			background-color:#CCCC33
		}
	#tabella1 td.nome {
		width: 100px;
		font-size: 0.8em;
		overflow: hidden;
		white-space: nowrap;
		padding: 0.2em 0.5em 0.2em 0.5em;		
	}
... ...
...

Tnx

**Gufo** · 13-03-2009, 14:30

Prova così:

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">
<!--
#tabella1 {
	border: 1px solid silver;
}
#tabella1 th {
	background-color: #C8C8C8;
	padding: 0.3em;
	line-height: 1.3em;
}
#tabella1 td {
	height: 20px;
	line-height: 20px;
	padding: 0.2em;
	margin-right: 5px;
}

	#tabella1 td.azienda {
		width: 100px;
		overflow: hidden;
		padding: 0.2em 0.5em 0.2em 0.5em;
		font-size: 0.8em;
	}
		#tabella1 td.azienda p {
			width: 80%;
			white-space: nowrap;
			overflow: hidden;
			margin: 0; padding: 0;
			background-color:#CCCC33
		}
	#tabella1 td.nome {
		width: 100px;
		font-size: 0.8em;
		overflow: hidden;
		white-space: nowrap;
		padding: 0.2em 0.5em 0.2em 0.5em;		
	}

-->
</style></head>

<body>

<table id="tabella1">
<thead>
	<tr>
		<th width="100%" nowrap>Ragione Sociale </th>
		<th width="100%" nowrap>Nominativo </th>
		<th width="1%" nowrap>Email</th>
		<th width="1%" nowrap>Categoria</th>
		<th width="1%" nowrap>Provincia</th>
		<th width="1%" nowrap>X</th>
		<th width="1%" nowrap>X</th>
		<th width="1%" nowrap>X</th>		
	</tr>
</thead>
<tbody>
	<tr class='tr_pari'>
	  <td nowrap="nowrap" class="azienda">

Ciccio ciccio spa</p></td>
	  <td nowrap="nowrap" class="nome">

Nando</p></td>
		<td nowrap="nowrap" class="email">info@cicciociccio.it</td>			
		<td nowrap="nowrap" class="categoria">Una categoria</td>
		<td nowrap="nowrap" class="provincia">Terni</td>
		<td width="1" nowrap="nowrap">xx</td>
		<td width="1" nowrap="nowrap">xx</td>
		<td width="1" nowrap="nowrap">xx</td>
	</tr>
</tbody>
</table>

</body>
</html>

**ricman** · 13-03-2009, 18:46

Cioè... hai messo il nowrap sul codice anzichè sui css?

(scusa se te lo chiedo ma ora non sono davanti al mio computer

)

**Gufo** · 13-03-2009, 20:08

Originariamente inviato da ricman
Cioè... hai messo il nowrap sul codice anzichè sui css?

(scusa se te lo chiedo ma ora non sono davanti al mio computer

)

Si è così! Anche perchè non ricordo se i css hanno una regola con lo stesso effetto

**ricman** · 16-03-2009, 10:43

Originariamente inviato da Gufo
Si è così! Anche perchè non ricordo se i css hanno una regola con lo stesso effetto

Da css per non andare a capo avevo capito che c'era questo: white-space: nowrap;

Cmq mi pare che non funzioni neanche il codice che scrivi sopra...

**Gufo** · 16-03-2009, 11:03

Originariamente inviato da ricman
Da css per non andare a capo avevo capito che c'era questo: white-space: nowrap;

Cmq mi pare che non funzioni neanche il codice che scrivi sopra...

Con il codice sopra deve funzionare perchè nowrap="nowrap" è specifico per non anfare a capo. Provato anche con la tua tabella e a me funziona

**ricman** · 16-03-2009, 11:12

Originariamente inviato da Gufo
Con il codice sopra deve funzionare perchè nowrap="nowrap" è specifico per non anfare a capo. Provato anche con la tua tabella e a me funziona

Ho provato a riscriverla qui ... mi sembra come quella che scritto tu... Puoi testarla?

**Gufo** · 05-04-2009, 19:41

Ti chiedo umilmente scusa se non ho risposto prima ma non mi ero accorto del tuo post, scusa ancora
Con questo codice a me funziona bene!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>test tabella</title>
	<style type="text/css">
	<!--
html { height: 100%; width: 100%; }
html, body { padding: 0; margin: 0; }
body { background: #fff; }
* {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#main {
	width: 85%;
	margin: 0 auto;
}
#contenuti {
	width: 100%;
	margin: 10px 0px 0px 0px;
	background-color: navy;
}
img, a { border: none; }

table {
	width: 100%;
}

#tabella1 {
	border: 1px solid silver;
	padding-bottom: 30px;
}
#tabella1 th {
	background-color: #C8C8C8;
	padding: 0.3em;
	line-height: 1.3em;
}
#tabella1 td {
	height: 20px;
	line-height: 20px;
	padding: 0.2em;
	margin-right: 5px;
}

	#tabella1 td.azienda {
		width: 10px;
		overflow: hidden;
		padding: 0.2em 0.5em 0.2em 0.5em;
		font-size: 0.8em;
	}
		#tabella1 td.azienda p {
			width: 80%;
			/*white-space: nowrap="nowrap";*/
			overflow: hidden;
			margin: 0; padding: 0;
			background-color: green
		}
	#tabella1 td.nome {
		width: 100px;
		font-size: 0.8em;
		overflow: hidden;
		/*white-space: nowrap="nowrap";*/
		padding: 0.2em 0.5em 0.2em 0.5em;		
	}
		#tabella1 td.nome p {
			width: 80%;
			/*white-space: nowrap="nowrap";*/
			overflow: hidden;
			margin: 0; padding: 0;
			background-color: green
		}
	#tabella1 td.email {
		color: #333366;
		font-family: "Courier New", Courier, mono;
		font-size: 0.9em;
		white-space: nowrap="nowrap";
		padding: 0.2em 0.5em 0.2em 0.5em;
	}
	#tabella1 td.categoria {
		padding: 0.2em 0.5em 0.2em 0.5em;
		white-space: nowrap="nowrap";
		font-size: 0.8em;
	}
	#tabella1 td.provincia {
		padding: 0.2em 0.5em 0.2em 0.5em;
		font-size: 0.8em;
	}

#tabella1 .tr_dispari {background-color:#F5F5F5;}
#tabella1 .tr_pari {background-color: #EEEEEE;}
#tabella1 tr:hover {background-color: #E7EEF1;}

#tabella1 a {
	background-color: transparent;
	display: block;
}
	-->
	</style>

</head><body>

<div id="main">
	
	<div id="contenuti">

		<h3>Provaaaaaaaa</h3>
<table id="tabella1">
<thead>
	<tr>
		<th nowrap="nowrap" width='1%'>Ragione Sociale </th>
		<th nowrap="nowrap" width='1%'>Utente </th>
		<th nowrap="nowrap" width='1%'>Email </th>
		<th nowrap="nowrap" width='1%'>Categoria </th>
		<th nowrap="nowrap" width='1%'>testo testo testo testo testo testo testo testo </th>
		<th nowrap="nowrap" width='1%'></th>
		<th nowrap="nowrap" width="1%"></th>
		<th nowrap="nowrap" width="1%"></th>		
	</tr>
</thead>
	<tbody>
		<tr class='tr_pari'>
			<td nowrap="nowrap"><td nowrap="nowrap"="nowrap="nowrap"" class="azienda" title="questo testo è lungo e dovrebbe restare dentro l'overflow">

questo testo è lungo e dovrebbe restare dentro l'overflow</p><td nowrap="nowrap"></td>
		  <td nowrap="nowrap" class="nome" title="un nome di prova lungo">

un nome di prova lungo</p></td>
		  <td nowrap="nowrap" class="email">info@unsito.it</td>			
		  <td nowrap="nowrap" class="categoria">una categoria</td>
		  <td nowrap="nowrap" class="provincia">Terni</td>
		  <td width="1" nowrap="nowrap"></td>
		  <td width="1" nowrap="nowrap"></td>
		  <td width="1" nowrap="nowrap"></td>
		</tr>
		
		<tr class='tr_dispari'>
			<td nowrap="nowrap"><td nowrap="nowrap"="nowrap="nowrap"" class="azienda" title="questo testo è lungo e dovrebbe restare dentro l'overflow">

questo testo è lungo e dovrebbe restare dentro l'overflow</p><td nowrap="nowrap"></td>
		  <td nowrap="nowrap" class="nome" title="xxxx">

prova</p></td>
		  <td nowrap="nowrap" class="email">info@unsito.it</td>			
		  <td nowrap="nowrap" class="categoria">una categoria</td>
		  <td nowrap="nowrap" class="provincia">Terni</td>
		  <td width="1" nowrap="nowrap"></td>
		  <td width="1" nowrap="nowrap"></td>
		  <td width="1" nowrap="nowrap"></td>
		</tr>
	</tbody>
</table>
</div> 
</div> 
</body>
</html>

Discussione: Tabella e overflow nei Td

Strumenti discussione

Ricerca discussione

Visualizza

Tabella e overflow nei Td

Permessi di invio