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 
|
mon css etait celui-ci:
Code :
- /* define the table content to be scrollable */
- /* set TBODY element to have block level attributes. All other non-IE browsers */
- /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
- /* induced side effect is that child TDs no longer accept width: auto */
- /* Filter out Opera 5.x/6.x and MacIE 5.x */
- head:first-child+body tbody[class].scrollContent {
- /*height:549px;*/
- overflow: auto;
- width: auto;
- }
- /* define height and width of scrollable area. Add 16px to width for scrollbar */
- /* allow WinIE to scale 100% width of browser by not defining a width */
- /* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x */
- div.tableContainer {
- clear: both;
- /*height:549px;*/
- overflow: auto;
- width: auto;
- }
- /* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
- \html div.tableContainer/* */ {
- padding: 0 16px 0 0;
- width: auto;
- }
- /* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
- html>body div.tableContainer {
- padding: 0;
- }
- /* WinIE 6.x needs to re-account for padding. Give it a negative margin */
- \html div.tableContainer table/* */ {
- margin: 0 -16px 0 0
- }
- /* define width of table. Opera 5.x/6.x and MacIE 5.x */
- html>body div.tableContainer table {
- float: none;
- margin: 0;
- width: auto;
- }
- /* set table header to a fixed position. WinIE 6.x only */
- /* In WinIE 6.x, any element with a position property set to relative and is a child of */
- /* an element that has an overflow property set, the relative value translates into fixed. */
- /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
- thead.fixedHeader tr {
- position: relative;
- /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
- top: expression(document.getElementById("tableContainer" ).scrollTop);
- }
|
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 :
- <script language="javascript">
- var mybrowser;
- var browserName = whichBrs();
- if (window.opera)
- {
- var frame = document.getElementById("tableContainer" );
- var htmlheight = document.body.clientHeight;
- htmlheight=htmlheight - 136;
- frame.style.height = (htmlheight) + "px";
- frame.style.overflow="auto";
- frame.style.width=document.body.clientWidth;
- }
- else
- {
- if (browserName=="Safari" )
- {
- var frame = document.getElementById("tableContainer" );
- var htmlheight = document.body.clientHeight;
- htmlheight=htmlheight - 136;
- frame.style.height = (htmlheight) + "px";
- frame.style.overflow="auto";
- frame.style.width=document.body.clientWidth;
- }
- else
- {
- if (document.all )
- {
- var frame = document.getElementById("tableContainer" );
- var htmlheight = document.body.clientHeight;
- htmlheight=htmlheight-136;
- frame.style.height = (htmlheight) + "px";
- frame.style.overflow="auto";
- }
- else
- {
- var frame = document.getElementById("tableContainer" );
- var htmlheight = document.body.clientHeight;
- htmlheight=htmlheight - 136;
- frame.style.height = (htmlheight) + "px";
- frame.style.overflow="auto";
- }
- }
- }
- </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
FORUM HardWare.fr
