[résolu]comment faire pour que les cell de 2 tables ont la même taille

comment faire pour que les cell de 2 tables ont la même taille [résolu] - HTML/CSS - Programmation

Marsh Posté le 13-01-2010 à 16:25:06    

Bonjour à tous .
volia, j'ai sur une page deux tableaux :
le premier est en fait le hearder de l'autre.
le second est construit dynamiquement a partir d'un query sql.
j'ai fait cela pour que quand on déroule le second tableau, le header reste visible.
le problème est que les deux tableaux n'ont pas la même taille de cellules.
comment pourrais-faire en javascript pour copier la largeur des cellules du second tableau vers le premier.
j'ai essayé avec les propriété tbodies et thead mais comme lors de la déclaration des tableaux, je ne spécifie pas le width, le champs est undefine.
 
toutes les réponses sont les bienvenues.
zoorg


Message édité par zoorg le 14-01-2010 à 16:55:22
Reply

Marsh Posté le 13-01-2010 à 16:25:06   

Reply

Marsh Posté le 13-01-2010 à 16:29:05    

tu peux montrer ton code et/ou un screenshot? j'ai l'impression d'après ce que tu dis que faire 2 tableaux n'est pas la meilleure solution...

Message cité 1 fois
Reply

Marsh Posté le 13-01-2010 à 16:49:49    

ben en fait, avant on avait une fonction pompée du net permettant avaec un seul tableau de "figer" le header a l'aide des balise thead et tbody.
seulement, cela ne fonctionnait que sur ie.
j'ai donc modifié la page , en utilisant des css, c'était mieux mais cela ne passait pas sur tout les navigateurs (safari et opera).
alors, j'ai pensé faire deux tableaux c'était  mieux.
il dois y avoir moyen de d'arranger cela, non ?
 

Reply

Marsh Posté le 13-01-2010 à 16:57:05    

pataluc a écrit :

tu peux montrer ton code et/ou un screenshot? j'ai l'impression d'après ce que tu dis que faire 2 tableaux n'est pas la meilleure solution...


Reply

Marsh Posté le 13-01-2010 à 17:03:25    

euh, comment on poste facilement une image ?
[img]D:\Mes documents\prtscreen.jpg[/img]

Reply

Marsh Posté le 13-01-2010 à 17:06:39    

Reply

Marsh Posté le 14-01-2010 à 08:53:22    

Reply

Marsh Posté le 14-01-2010 à 10:01:33    

ok. donc, quand tu dis figer le header, c'est au sens tu fais défiler le tableau, mais l'entête ne bouge pas? (comme "figer les volets" dans excel?)
 
parce que je te confirme qu'il vaut mieux avoir un seul tableau, c'est plus propre. après je ne sais pas comment faire défiler le reste... je regarde si je trouve qqchose.

Reply

Marsh Posté le 14-01-2010 à 10:06:44    

Reply

Marsh Posté le 14-01-2010 à 10:13:24    

merci mais j'avais déja essayé.
ça marche nikel sous internet explorer mais pour les autre browser cela ne fonctionne pas. c'est pour ça que j'ai mis deux tableaux.

Reply

Marsh Posté le 14-01-2010 à 10:13:24   

Reply

Marsh Posté le 14-01-2010 à 11:02:41    

ca fonctionne très bien sous firefox...

Reply

Marsh Posté le 14-01-2010 à 12:03:26    

le code HTML et CSS de ton tableau tu nous le file QUAND ??????
on va te montrer comment faire un truc propre :o

Message cité 1 fois

---------------
Blablaté par Harko
Reply

Marsh Posté le 14-01-2010 à 12:44:28    

gatsu35 a écrit :

le code HTML et CSS de ton tableau tu nous le file QUAND ??????
on va te montrer comment faire un truc propre :o


 
mon css etait celui-ci:

Code :
  1. /* define the table content to be scrollable                                              */
  2. /* set TBODY element to have block level attributes. All other non-IE browsers            */
  3. /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
  4. /* induced side effect is that child TDs no longer accept width: auto                     */
  5. /* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
  6. head:first-child+body tbody[class].scrollContent {
  7. /*height:549px;*/
  8. overflow: auto;
  9. width: auto;
  10. }
  13. /* define height and width of scrollable area. Add 16px to width for scrollbar          */
  14. /* allow WinIE to scale 100% width of browser by not defining a width                   */
  15. /* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x   */
  16. div.tableContainer {
  17. clear: both;
  18. /*height:549px;*/
  19. overflow: auto;
  20. width: auto;
  21. }
  23. /* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
  24. \html div.tableContainer/* */ {
  25. padding: 0 16px 0 0;
  26. width: auto;
  27. }
  29. /* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
  30. html>body div.tableContainer {
  32. padding: 0;
  33. }
  39. /* WinIE 6.x needs to re-account for padding. Give it a negative margin */
  40. \html div.tableContainer table/* */ {
  41. margin: 0 -16px 0 0
  42. }
  44. /* define width of table. Opera 5.x/6.x and MacIE 5.x */
  45. html>body div.tableContainer table {
  46. float: none;
  47. margin: 0;
  48. width: auto;
  49. }
  52. /* set table header to a fixed position. WinIE 6.x only                                       */
  53. /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
  54. /* an element that has an overflow property set, the relative value translates into fixed.    */
  55. /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
  56. thead.fixedHeader tr {
  57. position: relative;
  58. /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution      */
  59. top: expression(document.getElementById("tableContainer" ).scrollTop);
  60. }


 
 
le problème est que, pour que cela fonctionne, il faut ABSOLUMENT que la propriété heigth soit fixée.
mais bon, sur le site, cela ne peut être fixé sinon c'est moche
J'ai fait une focntion javascript qui met cette propriété a jours mais cela ne fonctionne pas bien en safari et opera :
 

Code :
  1. <script language="javascript">
  2. var mybrowser;
  3. var browserName = whichBrs();
  4. if (window.opera)
  5. {
  6. var frame = document.getElementById("tableContainer" );
  7.  var htmlheight = document.body.clientHeight;
  8.  htmlheight=htmlheight - 136;
  9.  frame.style.height = (htmlheight)  + "px";
  10.  frame.style.overflow="auto";
  11.  frame.style.width=document.body.clientWidth;
  12. }
  13. else
  14. {
  15. if (browserName=="Safari" )
  16. {
  18.  var frame = document.getElementById("tableContainer" );
  19.  var htmlheight = document.body.clientHeight;
  20.  htmlheight=htmlheight - 136;
  21.  frame.style.height = (htmlheight)  + "px";
  22.  frame.style.overflow="auto";
  23.  frame.style.width=document.body.clientWidth;
  24. }
  25. else
  26. {
  27.  if (document.all )
  28.  {
  29.  var frame = document.getElementById("tableContainer" );
  30.  var htmlheight = document.body.clientHeight;
  31.  htmlheight=htmlheight-136;
  32.  frame.style.height = (htmlheight)  + "px";
  33.  frame.style.overflow="auto";
  34.  }
  35.  else
  36.  {
  37.  var frame = document.getElementById("tableContainer" );
  38.  var htmlheight = document.body.clientHeight;
  39.  htmlheight=htmlheight - 136;
  40.  frame.style.height = (htmlheight)  + "px";
  41.  frame.style.overflow="auto";
  42.  }
  43. }
  44. }
  45. </script>


 
voici le site d'ou j'ai eu cette solution
http://www.imaputz.com/cssStuff/bigFourVersion.html
 
j'ai volontairement splitté sur les 4 browser pour pouvoir debugger.
mais rien n'y fait
alors j'avais pensé faire avec 2 tableaux.
 
et la, ça marche nikel, sauf que le header n'étant plsu lié au tableau, ne se redimentionne pas completement.
mais si vous aves des idée pour que cela fonctionne sur safari et opera, je suis preneur


Message édité par zoorg le 14-01-2010 à 12:46:52
Reply

Marsh Posté le 14-01-2010 à 13:16:46    

ET LE CODE HTMLLLLLLLLLLLLLLLLLLLLLL OU TU NE METS QU'un seul tableau :o

Message cité 1 fois

---------------
Blablaté par Harko
Reply

Marsh Posté le 14-01-2010 à 13:53:35    

gatsu35 a écrit :

ET LE CODE HTMLLLLLLLLLLLLLLLLLLLLLL OU TU NE METS QU'un seul tableau :o


voila

Code :
  1. <div id="tableContainer" class="tableContainer">
  2. <table id="tablst"  cellspacing="0" cellpadding="0" class="ScrollTable" width="100%">
  3. <thead id ="fixedHeader"  class="fixedHeader">
  4. <tr class="lsttit">
  5.     <cfif session.usrlng is "FR">
  6.         <th align="center">N°</th>
  7.         <th align="center" colspan="3">Description</th>
  8.  <th align="center">
  9.   <cfswitch expression=#session.usrroles#>
  10.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  11.   <cfcase value="ADHVEN">&nbsp;Cf.&nbsp;</cfcase>
  12.   <cfdefaultcase>&nbsp;Prix achat&nbsp;</cfdefaultcase>
  13.   </cfswitch>
  14.  </th>
  15.        <th colspan="2" align="center">
  16.   <cfswitch expression=#session.usrroles#>
  17.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  18.   <cfdefaultcase>&nbsp;Stock</cfdefaultcase>
  19.   </cfswitch>
  20.  </th>
  21.         <th rowspan="2" align="center">
  22.   <cfswitch expression=#session.usrroles#>
  23.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  24.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  25.   <cfdefaultcase>&nbsp;A cder</cfdefaultcase>
  26.   </cfswitch>
  27.  </th>
  28.         <th rowspan="2" align="center">&nbsp;</th>
  29.         <th rowspan="2" align="center">
  30.   <cfswitch expression=#session.usrroles#>
  31.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  32.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  33.   <cfdefaultcase>&nbsp;En cde</cfdefaultcase>
  34.   </cfswitch>
  35.  </th>
  36.         <th rowspan="2" align="center">
  37.   <cfswitch expression=#session.usrroles#>
  38.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  39.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  40.   <cfdefaultcase>&nbsp;Rem.</cfdefaultcase>
  41.   </cfswitch>
  42.  </th>
  43.  <th>&nbsp;</th>
  44.     <cfelse>
  45.         <th align="center">Prod.</th>
  46.         <th align="center" colspan="3">Beschrijving</th>
  47.  <th align="center">
  48.   <cfswitch expression=#session.usrroles#>
  49.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  50.   <cfcase value="ADHVEN">&nbsp;Cf&nbsp;</cfcase>
  51.   <cfdefaultcase>&nbsp;Aankoop prijs&nbsp;</cfdefaultcase>
  52.   </cfswitch>
  53.  </th>
  54.        <th colspan="2" align="center">
  55.   <cfswitch expression=#session.usrroles#>
  56.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  57.   <cfdefaultcase>&nbsp;Vooraad</cfdefaultcase>
  58.   </cfswitch>
  59.  </th>
  60.         <th rowspan="2" align="center">
  61.   <cfswitch expression=#session.usrroles#>
  62.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  63.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  64.   <cfdefaultcase>&nbsp;Te best.</cfdefaultcase>
  65.   </cfswitch>
  66.  </th>
  67.         <th rowspan="2" align="center">&nbsp;</th>
  68.  <th rowspan="2" align="center">
  69.   <cfswitch expression=#session.usrroles#>
  70.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  71.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  72.   <cfdefaultcase>&nbsp;In bestel.</cfdefaultcase>
  73.   </cfswitch>
  74.  </th>
  75.      <th rowspan="2" align="center">
  76.   <cfswitch expression=#session.usrroles#>
  77.   <cfcase value="ADHCLI">&nbsp;</cfcase>
  78.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  79.   <cfdefaultcase>&nbsp;Opm.</cfdefaultcase>
  80.   </cfswitch>
  81.  </th>
  82.  <th>&nbsp;</th>
  83.     </cfif>
  84. </tr>
  85. <tr class="lsttit">
  86.     <cfif session.usrlng is "FR">
  87. <th align="center">Prod.</th>
  88.         <th align="left">&nbsp;&nbsp;Réf. fourn.</th>
  89. <th>&nbsp;</th>
  90. <th align="right">&nbsp;Marque</th>
  91.         <th align="center">&nbsp;Prix vente&nbsp;</th>
  92.         <th colspan="2" align="center">&nbsp;Emb.&nbsp;</th>
  93. <th>&nbsp;</th>
  94.     <cfelse>
  95. <th align="center">nr</th>
  96. <th align="left">&nbsp;&nbsp;Lever. Ref.</th>
  97. <th>&nbsp;</th>
  98. <th align="right">&nbsp;Merk</th>
  99. <th align="center">&nbsp;Verk.prijs&nbsp;</th>
  100.         <th colspan="2" align="center">&nbsp;Verp.&nbsp;</th>
  101. <th>&nbsp;</th>
  102.     </cfif>
  103. </tr>
  104. <tbody class="scrollContent" id = "scrollContent">
  105. <cfset w_cpt = 0>
  106. <cfoutput query="prod_proj_query">
  108.     <cfif w_cpt eq 0><cfset w_cpt = 1><cfelse><cfset w_cpt = 0></cfif>
  109.     <cfif w_cpt eq 0><tr class="lstodd"><cfelse><tr class="lsteven"></cfif>
  111.     <!-- Ligne détail 1 -->
  113.     <td rowspan="2" valign="center">
  114. <b><a href="javascript:open_popup('prod_proj_det_#Session.usrlng#.cfm?prdnum=#prdnum#&prjnum=#prjnum#',700,500)">#prdnum#</a></b>
  115.     </td>
  117.     <td colspan="3">
  118.         &nbsp;
  119.         <cfif session.usrlng is "FR">
  120.     #prddes#
  121.         <cfelse>
  122.     #prdoms#
  123.  </cfif>
  124. &nbsp;#prdspc#&nbsp;
  125.     </td>
  127.     <td class="rgt">
  128.  <cfswitch expression=#session.usrroles#>
  129.  <cfcase value="ADHCLI">&nbsp;</cfcase>
  130.  <cfcase value="ADHVEN">
  131.   <cfset w_prdcoepub = Round(((prdprxpub - rplprxpub) / (1+(mytvatau/100)) / prdprxmbr) * 100)>
  132.   <cfset w_prdcoepub_ent = chr(64+Left(#w_prdcoepub#,1))>
  133.   <cfset w_prdcoepub_dec = Right(#w_prdcoepub#,2)>
  134.   &nbsp;
  135.   #tvacod#/#w_prdcoepub_dec##w_prdcoepub_ent#
  136.   &nbsp;
  137.  </cfcase>
  138.  <cfdefaultcase>
  139.   &nbsp;
  140.    #LSNumberFormat(prdprxmbr,"999,999.99" )# €/#unpcodvte#
  141.   &nbsp;
  142.  </cfdefaultcase>
  143.  </cfswitch>
  144.     </td>
  146.     <cfif prjprdtgs NEQ "">
  147.  <cfset vprdtgs=prjprdtgs>
  148.  <cfset vprdsta=prjprdsta>
  149.     <cfelse>
  150.  <cfset vprdtgs=prdprdtgs>
  151.  <cfset vprdsta=prdprdsta>
  152.     </cfif>
  154.     <td class="rgt">
  155.         &nbsp;
  156.         <cfif prdstkdis greater than 0>
  157.             <font color="Green">
  158.         <cfelse>
  159.             <font color="Red">
  160.         </cfif>
  161.         #prdstkdis# #unscod#</font>
  162.         &nbsp;
  163.     </td>
  165.     <td class="rgt">
  166.         &nbsp;
  167.         <cfif #vprdsta# EQ "M">
  168.             <img src="../../../pictures/nok.gif" width="16" height="16" alt="Mort">
  169.         <cfelse>
  170.             <cfif #vprdtgs# EQ "N">
  171.                 <cfswitch expression=#vprdsta#>
  172.                     <cfcase value="D">
  173.                         <img src="../../../pictures/dir.gif" width="16" height="16" alt="Direct">
  174.                  </cfcase>
  175.        <cfcase value="T">
  176.                 <img src="../../../pictures/tra.gif" width="16" height="16" alt="Transit">
  177.      </cfcase>
  178.      <cfcase value="G">
  179.       <cfif session.usrlng is "FR">
  180.                 <img src="../../../pictures/grp.gif" width="16" height="16" alt="Groupage">
  181.                 <cfelse>
  182.                 <img src="../../../pictures/grp.gif" width="16" height="16" alt="Groepage">
  183.                 </cfif>
  184.      </cfcase>
  185.      <cfdefaultcase>
  186.          &nbsp;
  187.      </cfdefaultcase>
  188.         </cfswitch>
  189.     </cfif>
  190.         </cfif>
  191.         &nbsp;
  192.     </td>
  194. <cfif #vprdtgs# EQ "N" and #vprdsta# EQ "D">
  195.  <td rowspan="2" valign="center">DIRECT</td>
  196.  <td rowspan="2" valign="center">&nbsp;</td>
  197.  <td rowspan="2" class="cnt">&nbsp;</td>
  198.  <td rowspan="2" valign="center">&nbsp;</td>
  199. <cfelse>
  201.   <td rowspan="2" valign="center">
  202.    <cfswitch expression=#session.usrroles#>
  203.    <cfcase value="ADHVEN">&nbsp;</cfcase>
  204.    <cfdefaultcase>
  205.     <input name="Q#prdnum#" class="small" size="2" align="right"
  206.         onchange="javascript:basHref('#prdnum#','#prjnum#')">
  207.    </cfdefaultcase>
  208.    </cfswitch>
  209.   </td>
  211.   <td rowspan="2" valign="center">
  212.   <cfswitch expression=#session.usrroles#>
  213.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  214.   <cfdefaultcase>
  215.    <a name="L#prdnum#" href="proj_bas.cfm?argMethod=xxx&argPrdnum=#prdnum#&argPrjnum=#prjnum#&argQte=0"" target="frm_bas" >
  216.    <cfif session.usrlng is "FR">
  217.    <img name="shop" src="../../../pictures/shp.gif" alt="Panier" width="16" height="16" border="0">
  218.    <cfelse>
  219.    <img name="shop" src="../../../pictures/shp.gif" alt="Winkelkaretje" width="16" height="16" border="0">
  220.    </cfif>
  221.    </a>
  222.   </cfdefaultcase>
  223.   </cfswitch>
  224.   </td>
  226.   <td rowspan="2" class="cnt">
  227.   <cfswitch expression=#session.usrroles#>
  228.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  229.   <cfdefaultcase>
  230.   <font color="red">#sldqte#</font>
  231.   </cfdefaultcase>
  232.   </cfswitch>
  233.   </td>
  235.   <td rowspan="2" valign="center">
  236.   <cfswitch expression=#session.usrroles#>
  237.   <cfcase value="ADHVEN">&nbsp;</cfcase>
  238.   <cfdefaultcase>
  239.   &nbsp;&nbsp;
  240.   <a name="basmem" href="javascript:open_popup('../../ordr/basket/basket_rem.cfm?from=cata&basnum=0&prjnum=#prjnum#&prdnum=#prdnum#',500,400)">
  241.   <cfif session.usrlng is "FR">
  242.   <img name="remarque" src="../../../pictures/memo.gif" alt="Remarque" border="0">
  243.   <cfelse>
  244.   <img name="remarque" src="../../../pictures/memo.gif" alt="Opmerking" border="0">
  245.   </cfif>
  246.   </a>
  247.   </cfdefaultcase>
  248.   </cfswitch>
  249.   </td>
  250.     </cfif>
  251.     </tr>
  253.     <!--- Ligne détail 2 --->
  255.     <cfif w_cpt eq 0><tr class="lstodd"><cfelse><tr class="lsteven"></cfif>
  257.     <td class="sml">
  258.         &nbsp;
  259.         #pvdean#
  260.         &nbsp;
  261.     </td>
  263.     <td>&nbsp;</td>
  265.     <td class="rgtsml">
  266.         &nbsp;
  267.         #marlib#
  268.         &nbsp;
  269.     </td>
  271.     <td class="rgt">
  272.         &nbsp;
  273.         #LSNumberFormat(prdprxpub,"999,999.99" )# €/#unpcodvte#
  274.         &nbsp;
  275.     </td>
  277.     <cfset prdembtip="">
  278. <cfswitch expression=#session.usrroles#>
  279. <cfcase value="ADHVEN"></cfcase>
  280. <cfdefaultcase>
  281.     <cfif prdembvl1 NEQ 0>
  282. <cfset prdembtip="Par #prdembvl1# #unpcodvte# : #prdcoevl1#">
  283.     </cfif>
  284.     <cfif prdembvl2 NEQ 0>
  285.         <cfset prdembtip=prdembtip & "&##10;Par #prdembvl2# #unpcodvte# : #prdcoevl2#">
  286.     </cfif>
  287.     <cfif prdembvl3 NEQ 0>
  288.         <cfset prdembtip=prdembtip & "&##10;Par #prdembvl3# #unpcodvte# : #prdcoevl3#">
  289.     </cfif>
  290.     <cfif prdembvl4 NEQ 0>
  291.         <cfset prdembtip=prdembtip & "&##10;Par #prdembvl4# #unpcodvte# : #prdcoevl4#">
  292.     </cfif>
  293. </cfdefaultcase>
  294. </cfswitch>
  295.     <td class="rgt" title="#prdembtip#">
  296.         &nbsp;
  297.         #prdemb# #unscod#
  298.         &nbsp;
  299.     </td>
  301.     <td title="#prdembtip#">
  302.         <cfif prdembtip NEQ "">
  303.             &nbsp;*
  304.         <cfelse>
  305.             &nbsp;
  306. </cfif>
  307.     </td>
  309.     </tr>
  311. </cfoutput>
  312. </tbody>
  313. </table>
  314. </DIV>

Reply

Marsh Posté le 14-01-2010 à 16:50:05    

bon, j'ai trouvé comment faire que deux tableaux aient la même taille de cellule :
primo, il faut que les colonnes (th ou td) aient un id
premier tableau

Code :
  1. <th align="center" id="h1">N°</th>


second tableau :

Code :
  1. <td rowspan="2" valign="center" name="b1">


 
ensuite on fait appel a cette fonction :

Code :
  1. function fixandSetTableWidth()
  2. {
  4. var table,table2;
  5. var t1,t2;
  7. try
  8. {
  9. for (var i = 0; i<7; i++)
  10. {
  11.  t1="h"+(i+1);
  12.  t2="b"+(i+1);
  14.  table = document.getElementById(t1);
  15.  table2 = document.getElementsByName(t2);
  16.       table.width=(table2[0].offsetWidth - 2);   
  17. }
  18. }
  19. catch(err)
  20.   {
  21.  alert(err.message);
  22.      }
  24. }


 
i etant egal au nombre de colonne à traiter.
 
le -2 c'est parceque le offsetWidt contient aussi les bords.
selon la police cela peut varier
 
merci d'avoir passé du temps avec moi
 
@pluche

Reply

Sujets relatifs:

Leave a Replay

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