Tabella con celle fisse

**antony85** · 21-01-2013, 22:21

Salve a tutti, devo realizzare una tabella, che sia composta da una decina di celle.
Ogni cella deve avere una larghezza specifica, ne piu ne meno. All'interno ogni cella contiene un'input type="text" con width=100%.

Ogni cella ha anche il suo tipico border, cellspacing e cellpadding.

Ho provato col classico width:100px per dare un valore fisso ad una cella, ma sembra non essere preciso(dato che sopra ho un'altra tabella che fa da "header" e non riesco ad allineare le due tabelle verticalmente dando il senso di "unica tabella"

In piu provando su browser diversi...ognuno si comporta in modo diverso(accentuando ancora di piu il difetto)

Quindi chiedo...c'è un modo per rendere le celle di una tabella(inclusa quindi le spaziature e bordature) imprescindibilmente fisse come larghezze?

Codice tabella header:
<tr style="text-align: center;font-size: 10px">
<td style="width: 100px" rowspan="2">Attributo</td>
<td style="width: 250px" colspan="3">Attributo</td>
<td style="width: 100px" rowspan="2">Attributo</td>
<td style="width: 100px" rowspan="2">Attributo</td>
<td style="width: 100px" rowspan="2">Attributo</td>
<td style="width: 100px" rowspan="2">Attributo</td>
<td style="width: 100px" rowspan="2">Attributo Utensili</td>
<td style="width: 50px" rowspan="2">Attributo</td>
<td style="width: 50px" rowspan="2">Attributo</td>
<td style="width: 100px" rowspan="2">Attributo</td>
</tr>
<tr style="text-align: center">
<td style="width: 50px">Attributo riga2</td>
<td style="width: 100px">Attributo riga2</td>
<td style="width: 100px">Attributo riga2</td>
</tr>
</table>

**Prill** · 21-01-2013, 22:40

In presenza di più rowspan e colspan per evitare imprevisti sarebbe meglio, anche se il codice si sporca, far ricorso a tabelle annidate. Nel tuo caso però, dato che in realtà le tre celle sotto la seconda della prima riga corrispondono esattamente alle dimensioni di quella, e tutte le dimensioni sono specificate non dovrebbero esserci problemi. Usando il tuo codice (aggiungendo inizialmente l'apertura del tag table) in una pagina completa di doctype non vedo differenze fra ie9, firefox, chrome e opera. Magari spiegaci in cosa consistono le differenze che vedi (e inserisci codice completo)

**antony85** · 22-01-2013, 13:02

non ho mai utilizzato il doctype....in cosa consiste?

**Prill** · 22-01-2013, 15:25

indica il linguaggio di marcatura usato (html 4 o xhtml, nelle versioni più o meno rigorose, transitional e strict, o html 5) e dice al browser di attenersi alle specifiche stabilite per quel linguaggio, riducendo la sua libertà di interpretazione e tenendo invece conto degli standard stabiliti dal w3c. In assenza di un doctype, o con un doctype incompleto, un browser tende a comportarsi come le sue versioni precedenti e soprattutto diverse sono le rese fra browser di produttori differenti (non che l'aderenza agli standard le elimini del tutto, ma di certo le riduce).

**antony85** · 23-01-2013, 08:56

ok, cerco su internet allora come impostare il doctype faccio un paio di test riguardo la resa della pagina!
Per quanto riguarda il codice completo della tab html:
(cio che fa fede è quindi la prima tabella che contiene le intestazioni, la seconda tabella dovrebbe rappresentare "una singola riga" della tabella degli header. L'obietttivo è quindi quello di rendere perfettamente allineata la seconda tabella alla prima tabella(cella della "pseudo-riga"(che in realtà è una tab) sotto cella della tab intestazione)

<table style="width: 1050px;margin-top: 20px;font-size: 12px">
<tr>
<td colspan="12"></td>
</tr>
<tr style="text-align: center;font-size: 10px">
<td style="width: 100px" rowspan="2">Uno</td>
<td style="width: 250px" colspan="3">Due</td>
<td style="width: 100px" rowspan="2">Tre</td>
<td style="width: 100px" rowspan="2">Quattro</td>
<td style="width: 100px" rowspan="2">Cinque</td>
<td style="width: 100px" rowspan="2">Sei</td>
<td style="width: 100px" rowspan="2">Sette</td>
<td style="width: 50px" rowspan="2">Otto</td>
<td style="width: 50px" rowspan="2">Nove</td>
<td style="width: 100px" rowspan="2">Dieci</td>
</tr>
<tr style="text-align: center">
<td style="width: 50px"><A></td>
<td style="width: 100px">B</td>
<td style="width: 100px">C</td>
</tr>
</table>
<table>
<tr style='width: 1050px;text-align:center'>
<td style='width: 94px'></td>
<td style='width: 44px'>Val0</td>
<td style='width: 94px;'><input type='text' style='width: 100%;' value='Val1'></td>
<td style='width: 94px;'><input type='text' style='width: 100%;' value='Val2'></td>
<td style='width: 94px;'><input type='text' style='width: 100%;' value='Val3'></td>
<td style='width: 94px;'><input type='text' style='width: 100%;' value='Val4'></td>
<td style='width: 94px;'><input type='text' style='width: 100%;' value='Val5'></td>
<td style='width: 385px;'></td>
</tr>
<tr>
<td><input type='text' style='width: 98px'></td>
<td style='width: 48px'>-</td>
<td><input type='text' style='width: 98px'></td>
<td><input type='text' style='width: 98px'></td>
<td><input type='text' style='width: 98px'></td>
<td><input type='text' style='width: 98px'></td>
<td><input type='text' style='width: 98px'></td>
<td><input type='text' style='width: 98px'></td>
<td><input type='text' style='width: 98px'></td>
<td><input type='text' style='width: 48px'></td>
<td><input type='text' style='width: 48px'></td>
<td><input type='text' style='width: 98px'></td>
</tr>
<tr>
<td></td>
<td>-</td>
<td><input type='text' style='width: 50px'></td>
<td><input type='text' style='width: 50px'></td>
<td><input type='text' style='width: 50px'></td>
<td><input type='text' style='width: 50px'></td>
<td><input type='text' style='width: 50px'></td>
</tr>
</table>

**Prill** · 23-01-2013, 17:00

Con la prima tabella risolvi così:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--

#myTable {
 width:1050px;
 margin-top:20px;
 font-size:12px;
 border:none;
 border-collapse:collapse;    
}
#myTable td {
 padding:0;
 width:100px; /* dato che la maggior parte delle celle sono larghe cento pixel, le imposto tutte così, poi sovrascrivo la larghezza di quelle diverse */   
}
#myTable #font10 td{
 font-size:10px;
}

-->
</style>
</head>

<body>
<table id="myTable">
 <tr id="font10">
  <td style="background:#99CCCC" rowspan="2">Uno</td>
  <td colspan="3" style="width: 250px; background:#9999FF">Due</td>
  <td style="background:#99CCCC" rowspan="2">Tre</td>
  <td rowspan="2">Quattro</td>
  <td style="background:#99CCCC" rowspan="2">Cinque</td>
  <td rowspan="2">Sei</td>
  <td style="background:#99CCCC" rowspan="2">Sette</td>
  <td style="width: 50px" rowspan="2">Otto</td>
  <td rowspan="2" style="width:50px;background:#99CCCC">Nove</td>
  <td rowspan="2" style="background:#00FF66">Dieci</td>
 </tr>
 <tr>
  <td style="width: 50px;background:#FFFF99">A</td>
  <td>B</td>
  <td style="background:#FFCC99">C</td>
 </tr>
</table>

</body>
</html>

da eliminare tutti gli sfondi che ho inserito solo per visualizzare meglio le celle. Per le celle larghe 50 e 250 pixel puoi creare delle classi invece che far ricorso a dichiarazioni di stile in linea.
La seconda tabella invece non ho capito bene come deve essere, avendo tu delle celle vuote e campi di testo di dimensioni diverse da una riga all'altra. Se le celle sulle varie righe sono tutte di dimensioni diverse allora sarà necessario ricorrere a tabelle annidate. Ho provato a interpretare e ti aggiungo il codice completo di tutte e due le tabelle:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
table {
	border:none;
	border-collapse:collapse;
}
table td{
	padding:0;
}
#myTable {
	width:1050px;
	margin-top:20px;
	font-size:12px;
}

#myTable #font10 td{
	font-size:10px;
}

#myTable td {
	width:100px; /* dato che la maggior parte delle celle sono larghe cento pixel, le imposto tutte così, poi sovrascrivo la larghezza di quelle diverse */
}
input {
	width:100%;
	padding:0;
	margin-bottom:2px;
}
-->
</style>
</head>

<body>
<table id="myTable">
	<tr id="font10">
		<td style="background:#99CCCC" rowspan="2">Uno</td>
		<td colspan="3" style="width: 250px; background:#9999FF">Due</td>
		<td style="background:#99CCCC" rowspan="2">Tre</td>
		<td rowspan="2">Quattro</td>
		<td style="background:#99CCCC" rowspan="2">Cinque</td>
		<td rowspan="2">Sei</td>
		<td style="background:#99CCCC" rowspan="2">Sette</td>
		<td style="width: 50px" rowspan="2">Otto</td>
		<td rowspan="2" style="width:50px;background:#99CCCC">Nove</td>
		<td rowspan="2" style="background:#00FF66">Dieci</td>
	</tr>
	<tr>
		<td style="width: 50px;background:#FFFF99">A</td>
		<td>B</td>
		<td style="background:#FFCC99">C</td>
	</tr>
</table>




<table width="1050">
  <tr>
    <td width="1050"><table width="100%">
      <tr>
				<td style="width:100px">&amp;nbsp;</td>
				<td style="width:48px">Val0</td>
				<td style="width:100px;"><input type="text" value="Val1"></td>
				<td style="width:100px;"><input type="text" value="Val2"></td>
				<td style="width:100px;"><input type="text" value="Val3"></td>
				<td style="width:100px;"><input type="text" value="Val4"></td>
				<td><input type="text" style="width: 98px" value="Val5"></td>
	   	</tr>
    	</table>
		</td>
  </tr>
  <tr>
    <td><table width="100%">
      <tr>
				<td style="width:100px"><input type="text"></td>
				<td style="width:48px">-</td>
				<td style="width:100px"><input type="text"></td>
				<td style="width:100x"><input type="text"></td>
				<td style="width:100px"><input type="text"></td>
				<td style="width:100px"><input type="text"></td>
				<td style="width:100px"><input type="text"></td>
				<td style="width:100px"><input type="text"></td>
				<td style="width:100px"><input type="text"></td>
				<td style="width:50px"><input type="text"></td>
				<td style="width:50px"><input type="text"></td>
				<td><input type="text" style="width:98px"></td>
		 </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td><table width="100%">
      <tr>
				<td style="width:100px"></td>
				<td style="width:48px">-</td>
				<td style="width:52px"><input type="text"></td>
				<td style="width:52px"><input type="text"></td>
				<td style="width:52px"><input type="text"></td>
				<td style="width:52px"><input type="text"></td>
				<td><input type="text" style="width:50px"></td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

anche per la seconda tabella invece che inserire dichiarazioni in linea puoi creare delle classi

**antony85** · 25-01-2013, 00:26

sembra essere esattamente cio che cercavo. Grazie mille!!!

Discussione: Tabella con celle fisse

Strumenti discussione

Ricerca discussione

Visualizza

Tabella con celle fisse

Permessi di invio