Figer une entête de tableau avec des DIV

par **Ish** » 11 janv. 2007, 18:43

Bon c'est pas mal mais j'ai un petit problème car j'ai deux fonction qui se croise une en CSS (pour mon probleme) et une autre en JavaScript (pour cacher des colonnes) ...

J'arrive à cacher la colonne mais lorsque je veux la réafficher, les entêtes se superpose !!

Code : Tout sélectionner

<html>
   <head>
	<title>affchage / masquage d'une colonne de tableau</title>
   <style>
      table{
         border-right:1px solid #999;
         border-top:1px solid #999;
         text-align:center;
      }
      
      thead, tfoot{
         background-color:#ff9;
      }
      
      td, th{
         border-left:1px solid #999;
         border-bottom:1px solid #999;
      }
      
      thead td{
         cursor:pointer;
      }
	  
	  /* this element contains the entire table structure */
	.outerframe {
		position: relative;		/* to capture the absolutely positioned col heads */
		padding-top: 25px;		/* space for the col heads */	
		margin: 25px;			/* arbitrary position of the structure on the page */
		width: 350px;			/* optional: width matches innerframe */
		background-color: #CFF; /* arbitrary styling */
	}

	/* this enables the table to scroll without scrolling the page */
	.innerframe {
		position: static;	
		overflow: scroll;	/* required */
		height: 120px;		/* height is required, its value arbitrary */
		width: 350px;		/* arbitrary, wide enough to contain the table */
		padding-left: 1px;	/* Mozilla hides the table's left border unless this is here */
	}

	.innerframe table {
		position: static;
		border-collapse: collapse;
	}

	.innerframe th, .innerframe td {
		width: 100px;				/* col heads must match with data columns; they don't have to all be the same width, but they must be fixed */
		border: 1px solid black;	/* optional */
	}

	/* position the row of column heads above the table */
	.innerframe tr.heads {
		position: absolute;	
		top: 0px;
		left: 1px;	/* shift col heads right to match the innerframe's padding-left above */
	}
      
   </style>
   <script>
     function modif_col(texte, col){
		var tr= document.getElementById("result").getElementsByTagName("tbody")[0].getElementsByTagName('tr');

		if(texte=="masque"){
			document.getElementById("result").getElementsByTagName("th")[col-1].style.display="none";
			for(var i=0;i<tr.length;i++){
				tr[i].getElementsByTagName("td")[col-1].style.display="none";
			}
			document.getElementById("result").getElementsByTagName("td")[0].title="affiche";
		}
		else {
			document.getElementById("result").getElementsByTagName("th")[col-1].style.display="";
			for(var i=0;i<tr.length;i++){
				tr[i].getElementsByTagName("td")[col-1].style.display="";
			}
			document.getElementById("result").getElementsByTagName("td")[0].title="masque";
		}
	}
   </script>
   </head>
   <body>
   <table>
	<tr class="heads"><td colspan="3"> Affichage des colonnes <td></tr>
			<tr>
				<td colspan="3">
					<form>
						<select name="affichage">
							<OPTION onclick="modif_col(this.title, 1);" title="affiche">colonne 1</OPTION>
							<OPTION onclick="modif_col(this.title, 2);" title="affiche">colonne 2</OPTION>
							<OPTION onclick="modif_col(this.title, 3);" title="affiche">colonne 3</OPTION>
					</form>
				</td>
			</tr>
   </table>
	<div class="outerframe">
	  <div class="innerframe">
      <table cellspacing="0" id="result">
        <thead> 
            <tr class="heads">
               <th onclick="modif_col(this.title, 1);" title="masque">col 1</th>
               <th onclick="modif_col(this.title, 2);" title="masque">col 2</th>
               <th onclick="modif_col(this.title, 3);" title="masque">col 3</th>
            </tr>
       </thead>
         <tbody>  
            <tr>
               <td>line 1 / col 1</td>
               <td>line 1 / col 2</td>
               <td>line 1 / col 3</td>
            </tr>
            <tr>
               <td>line 2 / col 1</td>
               <td>line 2 / col 2</td>
               <td>line 2 / col 3</td>
            </tr>
            <tr>
               <td>line 3 / col 1</td>
               <td>line 3 / col 2</td>
               <td>line 3 / col 3</td>
            </tr>
            <tr>
               <td>line 4 / col 1</td>
               <td>line 4 / col 2</td>
               <td >line 4 / col 3</td>
            </tr>
			<tr>
               <td>line 5 / col 1</td>
               <td>line 5 / col 2</td>
               <td>line 5 / col 3</td>
            </tr>
			<tr>
               <td>line 6 / col 1</td>
               <td>line 6 / col 2</td>
               <td>line 6 / col 3</td>
            </tr>
			<tr>
               <td>line 7 / col 1</td>
               <td>line 7 / col 2</td>
               <td>line 7 / col 3</td>
            </tr>
			<tr>
               <td>line 8 / col 1</td>
               <td>line 8 / col 2</td>
               <td>line 8 / col 3</td>
            </tr>
         </tbody> 
      </table>
	  </div>
	</div>
   </body>
</html>

Il y a une erreur mais je ne la vois pas !!!

par **Ish** » 11 janv. 2007, 17:44

Oula la ..... feignantise quand tu nous tiens !!!
Et dire qu'avec dix doigts, on peut faire autre chose que de se tourner les pouces !!

par **jojolapine** » 11 janv. 2007, 17:41

une petite recherche sur le forum avec "entête tableau" et hop:
http://www.phpfrance.com/forums/voir_re ... php#158962
puis en lisant un peu:
http://novitskisoftware.com/demo/fixedt ... heads.html

par **momox** » 11 janv. 2007, 17:41

Essaye de mettre une hauteur limite et un

Code : Tout sélectionner

overflow: scroll

en css pour ton tbody

@+

par **Ish** » 11 janv. 2007, 17:36

Bonjour à tous,

j'ai un tableau affiché par une fonction php et il est assez grand. Je voudrais figer l'entête des colonnes et avoir seulement le reste du tableau qui puisse avoir un Scroll

sachant que j'ai ce genre de tableau

Code : Tout sélectionner

<table>
  <thead>
    <th> .... </th>
    <th> .... </th>
    <th> .... </th>
  </thead>

  <tbody>
    <th>
      <td> ... </td>
      <td> ... </td>
      <td> ... </td>
    </th>
....
  </tbody>

Je pense qu'il faille faire ça avec des balises <DIV>, en plus ça ferait plus propre, mais est-ce que je mets la partie <thead> dans une <div> et le <tbody> dans une autre !!
Est-ce que ça ne va pas m'exploser la taille de mes colonnes ?

Quel serait les possibilités qui s'offre à moi !! ??

Merci

Figer une entête de tableau avec des DIV

Répondre

Étendre la vue Revue du sujet : Figer une entête de tableau avec des DIV

Figer une entête de tableau avec des DIV