18100 sujets

Questions générales et questions de débutants

Tableau avec scrollbar intégrée mais pas sur le titre ni le Header

Bonjour à tous,

je souhaite créer un tableau dont le contenu (et uniquement le contenu, pas le titre ni l'entete) est "scrollable".

Est-ce possible?

Le code suivant ne semble pas fonctionner. Y'a-t-il quelques corrections à apporter pour le faire marcher?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
	
	table {
	clear: both;
	width: 500px;
}

caption {
	font-size: 1em;
	text-transform: uppercase;
	text-align: left;
}

th {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	border: 1px solid #000;
	background-color: #BBB;
}

td {
  font-size: 1em;
	text-align: center;
	border: 1px solid #000;
}

#test {
	overflow:auto;
	height: 150px;
	background-color: #EE0;
}

</style>
</head>

<body>
	<table id="MyTable">
		<caption>Test tableau</caption>
		<tr>
			<th id="h1">Entete1</th>
			<th id="h2">Entete2</th>
		<tr>
		<div id="test">
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
	</div>
	<table>	
</body>
</html>
J'ai trouvé une astuce (qui vaut ce qu'elle vaut....)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
	
	table {
	clear: both;
	width: 500px;
}

caption {
	font-size: 1em;
	text-transform: uppercase;
	text-align: left;
}

th {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	border: 1px solid #000;
	background-color: #BBB;
}


td {
  font-size: 1em;
	text-align: center;
	border: 1px solid #000;
}

#test {
	overflow:auto;
	height: 150px;
	background-color: #EE0;
	width: 517px;
}
.hideTH {
	height: 0px;
	font-size: 0em;
	font-weight: normal;
	text-align: center;
	border: 0px #000;
	background-color: #EE0;
}


</style>
</head>

<body>
	<table id="MyTable">
		<caption>Test tableau</caption>
		<tr>
			<th id="hd1" width="40%">Entete1</th>
			<th id="hd2" width="60%">Entete2</th>
		<tr>
	</table>
	<div id="test">
	<table id="MyTable">
		<tr>
			<th id="h1" class="hideTH" width="40%"></th>
			<th id="h2" class="hideTH" width="60%"></th>
		<tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
		<tr>
			<td headers="h1">ligne n°</td>
			<td headers="h2">XXX</td>
		</tr>
	</table>
	</div>
		
</body>
</html>


qu'en pensez-vous ? connaissez-vous des methodes plus sympas?

klopi2*

PS: oui, je sais... les width devraient être dans les feuilles CSS..
Sujet clos
Aller à