खिड़की समायोज्य तालिका

Question

पर निश्चित शीर्षलेखों की तलाश में मैंने पूरे स्थान पर देखने की कोशिश की है और मेरी समस्या का कोई अच्छा समाधान नहीं मिला। मैं फिक्स्ड हेडर के साथ एक टेबल बनाने की तलाश में हूं जो शेष तालिका को स्क्रॉल करते समय रहती है। समस्या यह है कि जब भी पेज विंडो समायोजित होती है तो मैं यह भी गठबंधन करने में सक्षम होना चाहता हूं। मैं निश्चित हेडर प्राप्त करने में सक्षम हूं और जब मैं खिड़की को समायोजित करता हूं तो कॉलम को संरेखित करने में सक्षम हूं, बस दोनों एक साथ काम करने में सक्षम हो सकते हैं। क्या वहां कोई स्क्रिप्ट है जो यह कर सकती है? मैंने फिक्स्डहेडटेबल jquery, flexigrid, फिक्स्ड-हेडर-कॉफी, क्रोमैटबल और फ्लोटहेड की कोशिश की है। इनमें से कोई भी मुझे वह समाधान देने में सक्षम नहीं था जिसे मैं ढूंढ रहा हूं। हो सकता है कि मैं कुछ गलत कर रहा हूं लेकिन मेरे पास थिएडर, टैब्स इत्यादि का उपयोग करके एक पारंपरिक टेबल है। मैं टेबल को दो टेबलों में विभाजित करने से बचना चाहता हूं, क्योंकि ऐसा लगता है कि वे ठीक से लाइन नहीं करते हैं, लेकिन अगर यह एकमात्र समाधान है, तो मैं ले लो।

कृपया मदद करें! धन्यवाद!

Answer 1

, इस उत्तर का प्रयास करें यह IE8, फ़ायरफ़ॉक्स और क्रोम में काम कर रहा है ..

शैली

.Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; } 

    .BigTable { width: 100%; } 

    .BigTable td { width: 40%; } 

    .BigTable td + td { width: 30%; } 

    .BigTable td + td + td { width: 30%; } 

    .Header { margin-left: 200px; height: 30px; background-color: blue; } 

    .Header .Heading { width: 40%; float: left; height: 30px; } 

    .Header .Heading + .Heading { width: 30%; } 

    .Header .Heading + .Heading + .Heading { width: 30%; } 

टेबल

<div class="Header"> 
    <div class="Heading">Heading 1</div> 
    <div class="Heading">Heading 2</div> 
    <div class="Heading">Heading 3</div> 
</div> 
<div class="Container"> 
    <table class="BigTable"> 
     <tbody class="scrollContent"> 
      <tr class="normalRow"> 
       <td>Cell Content 1</td> 
       <td>Cell Content 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
      <tr class="alternateRow"> 
       <td>More Cell Content 1</td> 
       <td>More Cell Content 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
      <tr class="normalRow"> 
       <td>Even More Cell Content 1</td> 
       <td>Even More Cell Content 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
     <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 

        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

या jQuery को यह

#listBevel, #listTable { 
    position: absolute; 
    z-index: 2; 
    border: 1px solid #989898; 
    top: 85px; 
    left: 227px; 
    right: 37px; 
    height: 270px; 
    min-width: 654px; 
} 

/* @group List Table Headers */ 

#listTableHeaders { 
    position: absolute; 
    z-index: 3; 
    top: 67px; 
    left: 39px; 
    right: 37px; 
    height: 500px; 
    min-width: 654px; 
    border: 1px solid #989898; 
    overflow: hidden; 
    overflow-y: scroll; 
} 

.tableHeaderShadow { 
    background: url(/images/interface/bevel_shadow.png) repeat-x; 
    position: fixed; 
    height: 5px; 
    top: 105px; 
    right: 53px; 
    left: 228px; 
    min-width: 639px; 
} 

#scrollBarCoverContainer { 
    position: fixed; 
    z-index: 5; 
    top: 86px; 
    left: 228px; 
    right: 38px; 
    height: 0; 
    min-width: 654px; 
    font-size: 11px; 
    border: 1px none #989898; 
    text-align: right; 
} 

#scrollBarCoverUp { 
    background: url(/images/interface/list_header_bg.png) repeat-x; 
    width: 14px; 
    height: 18px; 
    border-left: 1px solid #e5e5e5; 
    float: right; 
} 

table#entryListHeaders th img.sortArrow { 
    float: right; 
} 

table#entryListHeaders th a { 
    color: #000; 
    text-decoration: none; 
    display: block; 
    height: 18px; 
} 

table#entryListHeaders th:hover { 
    background-position: 0 -18px; 
    cursor: default; 
} 

table#entryListHeaders th { 
    background: url(/images/interface/list_header_bg.png) repeat-x; 
    border-left: 1px solid #e5e5e5; 
    border-right: 1px solid #a5a5a5; 
    text-align: left; 
    padding: 0 5px; 
    margin: 0; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    height: 18px; 
    width: 42%; 
    font-size: 11px; 
    line-height: 1.6em; 
    text-shadow: #fff 0 1px 0; 
} 
table#entryListHeaders th + th { 
    width: 32%; 
} 

table#entryListHeaders th.selectedHeader { 
    text-shadow: #d8e6ff 0 1px 0; 
    background-image: url(/images/interface/list_header_selected.png); 
    border-left-color: #c2d4f2; 
} 

#listTable { 
    background-color: #fefefe; 
    top: 104px; 
    height: 251px; 
    overflow: auto; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    font-size: 11px; 
    border-collapse: collapse; 
} 

table#entryList { 
} 

table#entryList td { 
    width: 42%; 
} 

span.truncateText { 
    display: block; 
    height: 18px; 
    overflow: hidden; 
} 




tbody.scrollContent td, tbody.scrollContent tr.normalRow td { 
    border-right: 1px hidden #cbd1d8; 
    padding: 1px 5px; 
    height: 18px; 
    line-height: 1.6em; 
    margin: 0; 
    border-left-style: hidden; 
    border-left-width: 1px; 
} 

tbody.scrollContent tr.alternateRow { 
    background: #eaf2ff; 
} 

tbody.scrollContent tr.selectedRow td { 
    background: url(/images/interface/selected_row.png) repeat-x; 
    color: #fff; 
    border-right-style: hidden; 
} 

table#entryList td + td { 
    width: 32%; 
} 

tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover { 
    background-color: #d8e7ff; 
    cursor: default; 
} 




<div id="scrollBarCoverContainer"> 

     <div id="scrollBarCoverUp"></div> 

     <div class="tableHeaderShadow"></div> 


    </div> 

    <div id="listTableHeaders"> 

     <table id="entryListHeaders" border="0" cellpadding="0" cellspacing="0" width="100%"> 

     <thead class="fixedHeader"> 
      <tr> 
       <th id="selectedHeader">Name</th> 
       <th>Domain</th> 

       <th>>Modified</th> 
      </tr> 
     </thead> 
     <tbody class="scrollContent"> 
      <tr class="normalRow"> 
       <td>Cell Content 1</td> 
       <td>Cell Content 2</td> 

       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
      <tr class="alternateRow"> 
       <td>More Cell Content 1</td> 
       <td>More Cell Content 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 

      <tr class="normalRow"> 
       <td>Even More Cell Content 1</td> 
       <td>Even More Cell Content 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 



      <tr class="alternateRow"> 

       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 

        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 

       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 

        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 

       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 

      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 

       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 

       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 

        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 

       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 

      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 

       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 

       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 

        <tr class="alternateRow"> 
       <td>And Repeat 1</td> 
       <td>And Repeat 2</td> 
       <td>Sep 16, 2007 01:54 AM</td> 
      </tr> 
     </tbody> 
    </table> 

</div> 

Answer 2

आप केवल मानक HTML/CSS का उपयोग कर सकते हैं। विशेष रूप से, अपने सीएसएस में प्रदर्शन/ओवरफ्लो/ऊंचाई का उपयोग करें और अपने एचटीएमएल में थैड/टैब्ड का उपयोग करें। उदाहरण सीएसएस:

.scrollableTable tbody { 
    display: block; 
    overflow-y: auto; 
    width: 100%; 
    height: 50px; 
} 
.scrollableTable tr { 
    display: block; 
} 
.scrollableTable td, .scrollableTable th { 
    width: 50%; 
} 

उदाहरण HTML:

<table class="scrollableTable"> 
    <thead> 
     <tr> 
      <th>Fruit</th> 
      <th>Color</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Apples</td> 
      <td>Red</td> 
     </tr> 
     <tr> 
      <td>Bananas</td> 
      <td>Yellow</td> 
     </tr> 
     <tr> 
      <td>Oranges</td> 
      <td>Orange</td> 
     </tr> 
    </tbody> 
</table> 

Answer 3

मैं नैट बर्र द्वारा जवाब ऊपर संशोधित। पिछले उत्तर कॉलम संरेखण में भीड़ हो जाएगी।

शैली पत्रक

<style type="text/css"> 
.scrollableTable thead { 
display: block; 
    //overflow-y: auto; 
    width: 105%; 
    height: 25px; 
} 
.scrollableTable tbody { 
display: block; 
    overflow-y: auto; 
    width: 105%; 
    height: 200px; 
} 

टेबल

<table width="439" border="1" align="center" class="scrollableTable"> 
    <thead> 
     <tr> 
      <th width="20">No</th> 
      <th width="140">Fruit</th> 
      <th width="131">test</th> 
      <th width="120">Color</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Apples</td> 
      <td>ohyoijmnpkjoijikjm;kl</td> 
      <td>Red</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Bananas</td> 
      <td>ghjghjghj</td> 
      <td>Yellow</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Oranges</td> 
      <td>hfkjhkjhkhjkl</td> 
      <td>Orange</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>fghgfmjhgjhgjhg</td> 
      <td>hjkhjkgk</td> 
      <td>fghfg</td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td>fghfg</td> 
      <td>fgjfjfd</td> 
      <td>gfh</td> 
     </tr> 
     <tr> 
      <td>6</td> 
      <td>fghfhj</td> 
      <td>gjdfhgkgfk</td> 
      <td>ghjgfk</td> 
     </tr> 
     <tr> 
      <td>7</td> 
      <td>jkgfk</td> 
      <td>hjfkgfk</td> 
      <td>hjlklh</td> 
     </tr> 
     <tr> 
      <td>8</td> 
      <td>hgjfgghjghj</td> 
      <td>fgjkjhljk</td> 
      <td>hjkj</td> 
     </tr> 
     <tr> 
      <td>9</td> 
      <td>jhkjkf</td> 
      <td>fgjghj</td> 
      <td>gkhkfjghhgjgh</td> 
     </tr> 
     <tr> 
      <td>10</td> 
      <td>fkjfhk</td> 
      <td>hjg</td> 
      <td>fjkhgk</td> 
     </tr> 
     <tr> 
      <td>11</td> 
      <td>ghkkh</td> 
      <td>fghd</td> 
      <td>ghkgh</td> 
     </tr> 
     <tr> 
      <td>12</td> 
      <td>kjhjklhgkjgljghjh</td> 
      <td>hlg</td> 
      <td>kjghkjhgkj</td> 
     </tr> 
     <tr> 
      <td>13</td> 
      <td>kgk</td> 
      <td>d</td> 
      <td>kkjhgklh</td> 
     </tr> 
     <tr> 
      <td>14</td> 
      <td>hkjhgkjhklj</td> 
      <td>hjgk</td> 
      <td>lhjljhgygyh</td> 
     </tr> 
     <tr> 
      <td>15</td> 
      <td>ijihgjil</td> 
      <td>fg</td> 
      <td>lhjoklh</td> 
     </tr> 
     <tr> 
      <td>16</td> 
      <td>lohkjl</td> 
      <td>ghj</td> 
      <td>lholhuhity</td> 
     </tr> 
     <tr> 
      <td>17</td> 
      <td>kgjhgikghiu</td> 
      <td>ghjk</td> 
      <td>ljhljkyhklj</td> 
     </tr> 
     <tr> 
      <td>18</td> 
      <td>kgihgik</td> 
      <td>ghjg</td> 
      <td>iuhgouygih8</td> 
     </tr> 
     <tr> 
      <td>19</td> 
      <td>uoiughuiohou</td> 
      <td>ghkkj</td> 
      <td>oijhoiyhigouohu</td> 
     </tr> 
     <tr> 
      <td>20</td> 
      <td>ihnohnjoikjnm</td> 
      <td>fghfg</td> 
      <td>ioojhjphiuhiuhohouh</td> 
     </tr>    
    </tbody> 
</table> 

Answer 4

jQuery DataTables आप जो खोज रहे हैं, लेकिन आप इसे में देखा है काफी नहीं हो सकता है? डेटाटेबल्स दस्तावेज़ में "फिक्स्ड हैडर" के लिए एक विशेष अनुभाग शामिल है, इसलिए आपके पास कई कार्यान्वयन हैं जिनकी आप समीक्षा कर सकते हैं।

http://datatables.net/examples/

कुछ प्रासंगिक DataTables प्रलेखन से फिक्स्ड हैडर उदाहरण:

1. http://datatables.net/release-datatables/extras/FixedHeader/two_tables.html

   "निम्न उदाहरण दोनों FixedHeader साथ चलता दो ... टेबल उन पर सक्षम होना चाहिए। पाद लेख भी तय किया गया है ... "

2. http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html

   "यह उदाहरण दिखाता है कि FixedHeader है स्प्रेडशीट एप्लिकेशन की तरह अधिक देखने के लिए बनाया जा सकता है।"

Answer 5

यह एक प्रगतिशील वृद्धि समाधान है कि पार ब्राउज़र संगत होना चाहिए, धन्यवाद प्रयास करें।

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript"> 
     var sizeColWidths = function() { 
      // reset column widths (in case previously set) 
      $('#fruitTable td, #fruitTable th').css('width', 'auto'); 
      $('#fruitTable').removeClass('scrollableTable'); 
      $('#fruitTable tbody').css('width', 'auto'); 
      // record current column widths 
      var i=0, colWidth=new Array(); 
      $('#fruitTable th').each(function() { 
       colWidth[i++] = $(this).outerWidth(); 
      }); 
      // freeze the current column widths 
      $('#fruitTable tr').each(function() { 
       var i=0; 
       $('th, td', this).each(function() { 
        $(this).css('width', colWidth[i++] + 'px'); 
       }) 
      }); 
      // make the table body scroll (add tbody width for scroll bar) 
      $('#fruitTable').addClass('scrollableTable'); 
      $('#fruitTable tbody').css('width', ($('#fruitTable thead').width() + 20) +'px'); 
     }; 
     $(document).ready(function() {sizeColWidths()}); 
     $(window).resize(function() {sizeColWidths()}); 
    </script> 
    <style type="text/css"> 
     .scrollableTable tbody { 
      display: block; 
      height:50px; 
      overflow-y:auto; 
     } 
     .scrollableTable tr { 
      display: block; 
     } 
    </style> 
</head> 
<body> 
    <table id="fruitTable"> 
     <thead> 
      <tr> 
       <th>Fruit</th> 
       <th>Color</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Apples</td> 
       <td>Red</td> 
      </tr> 
      <tr> 
       <td>Bananas</td> 
       <td>Yellow</td> 
      </tr> 
      <tr> 
       <td>Grapes</td> 
       <td>Purple</td> 
      </tr>  
      <tr> 
       <td>Limes</td> 
       <td>Green</td> 
      </tr> 
      <tr> 
       <td>Oranges</td> 
       <td>Orange</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>