Tableau dans un div qui permet de scroller le contenu, pas l'en-tête.

Tableau dans un div qui permet de scroller le contenu, pas l'en-tête. - HTML/CSS - Programmation

Marsh Posté le 01-02-2007 à 16:33:05    

Bonjour, j'utilise le source suivant pour permettre d'éviter que le titre d'un tableau scrolle avec son contenu.
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <script type="text/javascript">
  4. <!--
  5. function removeClassName (elem, className) {
  6. elem.className = elem.className.replace(className, "" ).trim();
  7. }
  9. function addCSSClass (elem, className) {
  10. removeClassName (elem, className);
  11. elem.className = (elem.className + " " + className).trim();
  12. }
  14. String.prototype.trim = function() {
  15. return this.replace( /^\s+|\s+$/, "" );
  16. }
  18. function stripedTable() {
  19. if (document.getElementById && document.getElementsByTagName) { 
  20.  var allTables = document.getElementsByTagName('table');
  21.  if (!allTables) { return; }
  23.  for (var i = 0; i < allTables.length; i++) {
  24.   if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
  25.    var trs = allTables[i].getElementsByTagName("tr" );
  26.    for (var j = 0; j < trs.length; j++) {
  27.     removeClassName(trs[j], 'alternateRow');
  28.     addCSSClass(trs[j], 'normalRow');
  29.    }
  30.    for (var k = 0; k < trs.length; k += 2) {
  31.     removeClassName(trs[k], 'normalRow');
  32.     addCSSClass(trs[k], 'alternateRow');
  33.    }
  34.   }
  35.  }
  36. }
  37. }
  39. window.onload = function() { stripedTable(); }
  40. -->
  41. </script>
  42. <style type="text/css">
  43. <!--
  45. /* begin some basic styling here                     */
  46. body {
  47. background: #FFF;
  48. color: #000;
  49. font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  50. margin: 10px;
  51. padding: 0
  52. }
  54. table, td, a {
  55. color: #000;
  56. font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
  57. }
  59. h1 {
  60. font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
  61. margin: 0 0 5px 0
  62. }
  64. h2 {
  65. font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
  66. margin: 0 0 5px 0
  67. }
  69. h3 {
  70. font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
  71. color: #008000;
  72. margin: 0 0 15px 0
  73. }
  74. /* end basic styling                                 */
  76. /* define height and width of scrollable area. Add 16px to width for scrollbar          */
  77. div.tableContainer {
  78. clear: both;
  79. border: 1px solid #963;
  80. height: 285px;
  81. overflow: auto;
  82. width: 756px
  83. }
  85. /* Reset overflow value to hidden for all non-IE browsers. */
  86. html>body div.tableContainer {
  87. overflow: hidden;
  88. width: 756px
  89. }
  91. /* define width of table. IE browsers only                 */
  92. div.tableContainer table {
  93. float: left;
  94. width: 740px
  95. }
  97. /* define width of table. Add 16px to width for scrollbar.           */
  98. /* All other non-IE browsers.                                        */
  99. html>body div.tableContainer table {
  100. width: 756px
  101. }
  103. /* set table header to a fixed position. WinIE 6.x only                                       */
  104. /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
  105. /* an element that has an overflow property set, the relative value translates into fixed.    */
  106. /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
  107. thead.fixedHeader tr {
  108. position: relative
  109. }
  111. /* set THEAD element to have block level attributes. All other non-IE browsers            */
  112. /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
  113. html>body thead.fixedHeader tr {
  114. display: block
  115. }
  117. /* make the TH elements pretty */
  118. thead.fixedHeader th {
  119. background: #C96;
  120. border-left: 1px solid #EB8;
  121. border-right: 1px solid #B74;
  122. border-top: 1px solid #EB8;
  123. font-weight: normal;
  124. padding: 4px 3px;
  125. text-align: left
  126. }
  128. /* make the A elements pretty. makes for nice clickable headers                */
  129. thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
  130. color: #FFF;
  131. display: block;
  132. text-decoration: none;
  133. width: 100%
  134. }
  136. /* make the A elements pretty. makes for nice clickable headers                */
  137. /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
  138. thead.fixedHeader a:hover {
  139. color: #FFF;
  141. text-decoration: underline;
  142. width: 100%
  143. }
  145. /* define the table content to be scrollable                                              */
  146. /* set TBODY element to have block level attributes. All other non-IE browsers            */
  147. /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
  148. /* induced side effect is that child TDs no longer accept width: auto                     */
  149. html>body tbody.scrollContent {
  151. height: 262px;
  152. overflow: auto;
  153. width: 100%
  154. }
  156. /* make TD elements pretty. Provide alternating classes for striping the table */
  157. tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
  158. background: #FFF;
  159. border-bottom: none;
  160. border-left: none;
  161. border-right: 1px solid #CCC;
  162. border-top: 1px solid #DDD;
  163. padding: 2px 3px 3px 4px
  164. }
  166. tbody.scrollContent tr.alternateRow td {
  167. background: #EEE;
  168. border-bottom: none;
  169. border-left: none;
  170. border-right: 1px solid #CCC;
  171. border-top: 1px solid #DDD;
  172. padding: 2px 3px 3px 4px
  173. }
  175. /* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
  176. /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
  177. html>body thead.fixedHeader th {
  178. width: 200px
  179. }
  181. html>body thead.fixedHeader th + th {
  182. width: 240px
  183. }
  185. html>body thead.fixedHeader th + th + th {
  186. width: 316px
  187. }
  189. /* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
  190. /* All other non-IE browsers.                                            */
  191. html>body tbody.scrollContent td {
  192. width: 200px
  193. }
  195. html>body tbody.scrollContent td + td {
  196. width: 240px
  197. }
  199. html>body tbody.scrollContent td + td + td {
  200. width: 300px
  201. }
  202. -->
  203. </style>
  204. </head><body>
  206. <h1>Pure CSS Scrollable Table with Fixed Header</h1>
  207. <h2>Using CSS to allow scrolling within a single HTML table</h2>
  209. <div><br/></div>
  211. <h2>The Big 4 Version</h2>
  212. <h3>Basic CSS Browser Filtering</h3>
  214. <div id="tableContainer" class="tableContainer">
  215. <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
  216. <thead class="fixedHeader">
  217. <tr>
  218.  <th><a href="#">Header 1</a></th>
  219.  <th><a href="#">Header 2</a></th>
  220.  <th><a href="#">Header 3</a></th>
  221. </tr>
  222. </thead>
  223. <tbody class="scrollContent">
  224. <tr>
  225.  <td>Cell Content 1</td>
  226.  <td>Cell Content 2</td>
  227.  <td>Cell Content 3</td>
  228. </tr>
  229. <tr>
  230.  <td>More Cell Content 1</td>
  231.  <td>More Cell Content 2</td>
  232.  <td>More Cell Content 3</td>
  233. </tr>
  234. <tr>
  235.  <td>Cell Content 1</td>
  236.  <td>Cell Content 2</td>
  237.  <td>Cell Content 3</td>
  238. </tr>
  239. <tr>
  240.  <td>More Cell Content 1</td>
  241.  <td>More Cell Content 2</td>
  242.  <td>More Cell Content 3</td>
  243. </tr>
  244. <tr>
  245.  <td>Cell Content 1</td>
  246.  <td>Cell Content 2</td>
  247.  <td>Cell Content 3</td>
  248. </tr>
  249. <tr>
  250.  <td>More Cell Content 1</td>
  251.  <td>More Cell Content 2</td>
  252.  <td>More Cell Content 3</td>
  253. </tr>
  254. <tr>
  255.  <td>Cell Content 1</td>
  256.  <td>Cell Content 2</td>
  257.  <td>Cell Content 3</td>
  258. </tr>
  259. <tr>
  260.  <td>More Cell Content 1</td>
  261.  <td>More Cell Content 2</td>
  262.  <td>More Cell Content 3</td>
  263. </tr>
  264. <tr>
  265.  <td>Cell Content 1</td>
  266.  <td>Cell Content 2</td>
  267.  <td>Cell Content 3</td>
  268. </tr>
  269. <tr>
  270.  <td>More Cell Content 1</td>
  271.  <td>More Cell Content 2</td>
  272.  <td>More Cell Content 3</td>
  273. </tr>
  274. <tr>
  275.  <td>Cell Content 1</td>
  276.  <td>Cell Content 2</td>
  277.  <td>Cell Content 3</td>
  278. </tr>
  279. <tr>
  280.  <td>More Cell Content 1</td>
  281.  <td>More Cell Content 2</td>
  282.  <td>More Cell Content 3</td>
  283. </tr>
  284. <tr>
  285.  <td>Cell Content 1</td>
  286.  <td>Cell Content 2</td>
  287.  <td>Cell Content 3</td>
  288. </tr>
  289. <tr>
  290.  <td>More Cell Content 1</td>
  291.  <td>More Cell Content 2</td>
  292.  <td>More Cell Content 3</td>
  293. </tr>
  294. <tr>
  295.  <td>Cell Content 1</td>
  296.  <td>Cell Content 2</td>
  297.  <td>Cell Content 3</td>
  298. </tr>
  299. <tr>
  300.  <td>More Cell Content 1</td>
  301.  <td>More Cell Content 2</td>
  302.  <td>More Cell Content 3</td>
  303. </tr>
  304. <tr>
  305.  <td>Cell Content 1</td>
  306.  <td>Cell Content 2</td>
  307.  <td>Cell Content 3</td>
  308. </tr>
  309. <tr>
  310.  <td>More Cell Content 1</td>
  311.  <td>More Cell Content 2</td>
  312.  <td>More Cell Content 3</td>
  313. <td style="visibility:'hidden'">More Cell Content 1</td>
  314. </tr>
  317. </tbody>
  318. </table>
  319. </div>
  320. </body></html>


 
Mais j'ai le problème suivant : je ne peux pas éviter l'affichage des cases ayant style="display:'none'"
 
Et autre chose : chez moi, le titre "s'envole" lorsque je scrolle le contenu du tableau avec la molette..., mais cela vient du contexte dans lequel j'ai incrusté ce code. Je suis sous IE et mon tableau est dans un div qui est lui même dans un autre tableau.
 
Des idées?
Merci d'avance.


---------------
programmeur : "Personne qui résoud, de manière incompréhensible, un problème dont tu ignorais même l'existence..."  Pierre Desproges.
Reply

Marsh Posté le 01-02-2007 à 16:33:05   

Reply

Marsh Posté le 02-02-2007 à 10:21:01    

Bon, le souci d'affichage des colonnes, c'est a cause de ma manie à la c** de mettre des quotes partout...
 
Mais le pb de l'entete qui part vers le haut, ca c'est moyen...
Le contexte dont je parlais, c'est qu'en fait j'ai deja d'autres styles qui sont utilisées sur d'autres composants de ma page...
 
En fait je sais pourquoi l'en-tête se déplace comme ca, c'est parce que dans mon tableau, chaque ligne dispose d'un style particulier, avec en plus un rollover(appelés avec onmouseover et onmouseout)
Comment pallier à ce problème?
Help please!


Message édité par ugopetit le 02-02-2007 à 13:26:06

---------------
programmeur : "Personne qui résoud, de manière incompréhensible, un problème dont tu ignorais même l'existence..."  Pierre Desproges.
Reply

Marsh Posté le 02-02-2007 à 15:57:22    

Merci a tous pour vos réponses  :sweat:  
Bref, je me suis débrouillé tout seul.
ciao les amis...


---------------
programmeur : "Personne qui résoud, de manière incompréhensible, un problème dont tu ignorais même l'existence..."  Pierre Desproges.
Reply

Marsh Posté le 06-02-2007 à 16:03:34    

A mon avis la réponse est dans la fonction css "overfllow", ou alors j'ai pas compris l'exposé du problème.


Message édité par PunkRod le 06-02-2007 à 16:03:47

---------------
Assistants SWGOH
Reply

Marsh Posté le 06-02-2007 à 18:27:11    

< à supprimer car tu as utilisé ce que j'allais te conseiller :D >


Message édité par Krueger le 06-02-2007 à 18:29:24
Reply

Marsh Posté le 07-02-2007 à 10:54:50    

En fait , le rollover que je fais sur chaque ligne du tableau change la couleur du texte, du background et des bordures des cases.
Et le fait de changer la couleur des bordures fout le bordel, enfin fait scroller l'en-tête(mais quand je dis scroller, ce n'est pas qu'elle disparait dans le div non non, elle se promenait SUR ma page...).
En même temps c'est sûrement du à IE, mais je ne veux pas faire ma mauvaise langue...


---------------
programmeur : "Personne qui résoud, de manière incompréhensible, un problème dont tu ignorais même l'existence..."  Pierre Desproges.
Reply

Marsh Posté le 14-08-2008 à 12:23:54    

bonjour,  
 
Je me suis appuyé sur le code que vous avez écrit pour concevoir une liste déroulante avec header figée.
Nota : la différence consiste à ce que la hauteur des données variées selon la taille de la fenêtre grace à des fonctions javascript.
 
ma page est accessible à l'adresse http://www.vixellmailer.com/test2.php
 
(Tout le code est accessible par click droit, les données ne sont pas dynamiques dans cette page d'exemple.)
 
Sur Firefox, tout marche nickel. Sous IE, le scroll ne fonctionne pas.
 
Pouvez vous m'aider svp à faire fonctionner cette page sous IE ?
 
Merci.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed