Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP]Blokowanie kolumny w tabeli...
Forum PHP.pl > Forum > Przedszkole
PYJTER
31.01.2014, 15:41:04
Witam mam taki problem zmagam się z tabelą i danymi.... Tabela ma ok. 20 kolumn i chciałbym zablokować dwie pierwsze kolumny... Szukam identycznego rozwiązania jak w Excel czyli blokuje dwie pierwsze kolumny a dane po prawej moge przewijać.... z góry dziękuję za pomoc....
phpion
31.01.2014, 15:42:57
Wygeneruj dwie tabelki obok siebie. Pierwsza niech zawiera 2 zablokowane kolumny, a druga pozostałe. Drugą tabelę otocz divem z overflow: scroll. Musisz niestety zwrócić uwagę na to by wysokości kolumn w obu tabelach Ci się nie rozjechały.
Kshyhoo
31.01.2014, 16:48:37
Nie umiemy korzystać z szukajki?

A po za tym:
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <body>
  3.     <head>
  4.         <style>
  5.             .TableLarge td, .TableLarge th{
  6.                 border-style: solid;
  7.                 border-width: 1px;
  8.  
  9.                 border-color: #CAE3EF;
  10.  
  11.                 padding: 7px;
  12.                 white-space: nowrap;
  13.                 font-family: Verdana;
  14.                 font-size: 10px;
  15.             }
  16.  
  17.             .TableLarge{
  18.                 border-style: none;
  19.                 border-collapse: collapse;
  20.             }
  21.  
  22.             #padding_for_test{
  23.                 height: 3000px;
  24.                 width: 9000px;
  25.             }
  26.  
  27.         </style>
  28.         <script type="text/javascript">
  29.             function table_make_fixed_header(elTable, bHorizontal, bVertical, nRepositionIntervalMilliseconds, bWrappedByScrollableDiv)
  30.             {
  31.                 if(!bHorizontal && !bVertical)
  32.                     return;
  33.  
  34.                 if(!elTable.id)
  35.                     elTable.id="FixedVH_Headers_"+(new Date().getTime())+Math.floor(Math.random()*10000000);
  36.  
  37.                 var zIndex=1;
  38.                 if(window.getComputedStyle)
  39.                     zIndex=parseInt(window.getComputedStyle(elTable))?parseInt(window.getComputedStyle(elTable))+1:1;
  40.  
  41.                 var fnSetupHeaderCell=function(elCell, zIndex)
  42.                 {
  43.                     var elDivWrapper=document.createElement("div");
  44.  
  45.                     elDivWrapper.setAttribute("style", "-moz-box-shadow: 3px 3px 4px #aaaaaa; -webkit-box-shadow: 3px 3px 4px #aaaaaa; box-shadow: 3px 3px 4px #aaaaaa;");
  46.                     elDivWrapper.style.zIndex=zIndex;
  47.                     elDivWrapper.style.backgroundColor="#0000ee";
  48.                     elDivWrapper.style.color="white";
  49.                     elDivWrapper.style.padding="3px";
  50.  
  51.                     elDivWrapper.className="DivWrapper";
  52.                     elDivWrapper.style.position="relative";
  53.  
  54.                     while(elCell.childNodes.length)
  55.                         elDivWrapper.appendChild(elCell.childNodes[0]);
  56.                     elCell.appendChild(elDivWrapper);
  57.                 };
  58.  
  59.                 if(bVertical)
  60.                     for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
  61.                         fnSetupHeaderCell(elTable.rows[r].cells[0], zIndex);
  62.                 if(bHorizontal)
  63.                     for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
  64.                         fnSetupHeaderCell(elTable.rows[0].cells[c], zIndex);
  65.  
  66.                 _table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);
  67.  
  68.                 //this could be CPU intensive, depending on the number of events fired and size of the table.
  69.                 var onScrollEventHandler=function(ev){
  70.                     _table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);
  71.                 };
  72.  
  73.                 var elScrollable=bWrappedByScrollableDiv?elTable.parentNode:window;
  74.                 if(elScrollable.addEventListener)
  75.                     elScrollable.addEventListener('scroll', onScrollEventHandler, false);
  76.                 else if (elScrollable.attachEvent)
  77.                     elScrollable.attachEvent('scroll', onScrollEventHandler);
  78.  
  79.                 //this is undesired for performance reasons, hooks and event listeners are prefered instead.
  80.                 if(nRepositionIntervalMilliseconds>0)
  81.                     setInterval("_table_make_fixed_header_reposition('"+elTable.id+"', "+(bHorizontal?"true":"false")+", "+(bVertical?"true":"false")+", "+(bWrappedByScrollableDiv?"true":"false")+")", nRepositionIntervalMilliseconds);
  82.             }
  83.  
  84.             function _table_make_fixed_header_reposition(strTableID, bHorizontal, bVertical, bWrappedByScrollableDiv)
  85.             {
  86.                 var elTable=document.getElementById(strTableID);
  87.  
  88.                 var strLeft;
  89.                 var strTop;
  90.                 if(bWrappedByScrollableDiv)
  91.                 {
  92.                     strLeft=Math.min(Math.max(elTable.parentNode.scrollLeft-elTable.offsetLeft+elTable.parentNode.offsetLeft, 0), elTable.offsetWidth)+"px";
  93.                     strTop=Math.min(Math.max(elTable.parentNode.scrollTop-elTable.offsetTop+elTable.parentNode.offsetTop, 0), elTable.offsetHeight)+"px";
  94.                 }
  95.                 else
  96.                 {
  97.                     strLeft=Math.min(Math.max(f_scrollLeft()-elTable.offsetLeft, 0), elTable.offsetWidth)+"px";
  98.                     strTop=Math.min(Math.max(f_scrollTop()-elTable.offsetTop, 0), elTable.offsetHeight)+"px";
  99.                 }
  100.  
  101.                 if(bVertical)
  102.                     for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
  103.                         elTable.rows[r].cells[0].childNodes[0].style.left=strLeft;
  104.                 if(bHorizontal)
  105.                     for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
  106.                         elTable.rows[0].cells[c].childNodes[0].style.top=strTop;
  107.             }
  108.  
  109.  
  110.             //http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
  111.             function f_scrollLeft(){
  112.                 return f_filterResults (
  113.                     window.pageXOffset ? window.pageXOffset : 0,
  114.                     document.documentElement ? document.documentElement.scrollLeft : 0,
  115.                     document.body ? document.body.scrollLeft : 0
  116.                 );
  117.             }
  118.             function f_scrollTop() {
  119.                 return f_filterResults (
  120.                     window.pageYOffset ? window.pageYOffset : 0,
  121.                     document.documentElement ? document.documentElement.scrollTop : 0,
  122.                     document.body ? document.body.scrollTop : 0
  123.                 );
  124.             }
  125.             function f_filterResults(n_win, n_docel, n_body) {
  126.                 var n_result = n_win ? n_win : 0;
  127.                 if (n_docel && (!n_result || (n_result > n_docel)))
  128.                     n_result = n_docel;
  129.                 return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
  130.             }
  131.  
  132.  
  133.             //you should add an event handler for onload here
  134.         </script>
  135.     </head>
  136.     <body>
  137.         <p>
  138.             Vertical and horizontal th cells should remain visible and aligned while scrolling.<br>
  139.             This solution does not use any frameworks. Feel free to replace existing helpers (scroll offsets) using jquery or prototype (or any other framework).
  140.         </p>
  141.  
  142.         <div style="width: 800px; height: 600px; overflow: scroll">
  143.             <table class="TableLarge" id="mySpecialHugeTable">
  144.                 <tr>
  145.                     <th>Fixed!</th>
  146.                     <th>Fixed!</th>
  147.                     <th>Fixed!</th>
  148.                     <th>Fixed!</th>
  149.                     <th>Fixed!</th>
  150.                     <th>Fixed!</th>
  151.                     <th>Fixed!</th>
  152.                     <th>Fixed!</th>
  153.                     <th>Fixed!</th>
  154.                 </tr>
  155.                 <tr>
  156.                     <th>Fixed!</th>
  157.                     <td>My mother has apples.</td>
  158.                     <td>My mother has apples.</td>
  159.                     <td>The goose is pretty.</td>
  160.                     <td>Hello world!</td>
  161.                     <td>This is a very short story...Real short.</td>
  162.                     <td>Umm...how is this done again?</td>
  163.                     <td>Umm...how is this done again?</td>
  164.                     <td>I think Javascript is some kind of Voodoo on the DOM.</td>
  165.                 </tr>
  166.                 <tr>
  167.                     <th>Fixed!</th>
  168.                     <td>The goose is pretty.</td>
  169.                     <td>Hello world!</td>
  170.                     <td>Umm...how is this done again?</td>
  171.                     <td>Umm...how is this done again?</td>
  172.                     <td>My mother has apples.</td>
  173.                     <td>I think Javascript is some kind of Voodoo on the DOM.</td>
  174.                     <td>This is a very short story...Real short.</td>
  175.                     <td>This is a very short story...Real short.</td>
  176.                 </tr>
  177.                 <tr>
  178.                     <th>Fixed!<br>multi-line</th>
  179.                     <td>My mother has apples.</td>
  180.                     <td>I think Javascript is some kind of Voodoo on the DOM.</td>
  181.                     <td>I think Javascript is some kind of Voodoo on the DOM.</td>
  182.                     <td>Hello world!</td>
  183.                     <td>This is a very short story...Real short.</td>
  184.                     <td>The goose is pretty.</td>
  185.                     <td>The goose is pretty.</td>
  186.                     <td>Umm...how is this done again?</td>
  187.                 </tr>
  188.                 <tr>
  189.                     <th>Fixed!</th>
  190.                     <td>My mother has apples.</td>
  191.                     <td>Umm...how is this done again?</td>
  192.                     <td>The goose is pretty.</td>
  193.                     <td>The goose is pretty.</td>
  194.                     <td>This is a very short story...Real short.</td>
  195.                     <td>Hello world!</td>
  196.                     <td>Hello world!</td>
  197.                     <td>I think Javascript is some kind of Voodoo on the DOM.</td>
  198.                 </tr>
  199.             </table>
  200.         </div>
  201.  
  202.         <div id="padding_for_test">&nbsp;</div>
  203.  
  204.         <script type="text/javascript">
  205.             table_make_fixed_header(document.getElementById("mySpecialHugeTable"), /*bHorizontal*/ true, /*bVertical*/ true, 1000, /*bWrappedByScrollableDiv*/ true);
  206.         </script>
  207.     </body>
  208. </html>
[PHP] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.