ฉันจะปล่อยให้ร่างกายเลื่อนโต๊ะได้อย่างไร

148

ฉันกำลังเขียนหน้าที่ฉันต้องการตาราง HTML เพื่อรักษาขนาดที่ตั้งไว้ ฉันต้องการส่วนหัวที่ด้านบนของตารางเพื่ออยู่ที่นั่นตลอดเวลา แต่ฉันยังต้องการเนื้อความของตารางเพื่อเลื่อนไม่ว่าจะมีการเพิ่มแถวจำนวนเท่าใดในตาราง คิดว่าเป็นรุ่นเล็ก ๆ ของ excel ดูเหมือนว่าเป็นงานง่าย ๆ แต่เกือบทุกโซลูชันที่ฉันพบบนเว็บจะมีข้อเสียเปรียบ ฉันจะแก้ปัญหานี้ได้อย่างไร

javascript  html  css  html-table 
— มิ้นต์
แหล่งที่มา
2
มีตัวอย่างมากมายอยู่ที่นั่น คนนี้เป็นหนึ่งในพวกเขา
— Darren Kopp
ฉันต้องการที่จะกำหนดเป้าหมาย IE6, IE7, FF, โดยเฉพาะอย่างยิ่ง ... แต่น่าเสียดายที่ IE
— มิ้นต์
มีแฮ็ก CSS จำนวนมากอยู่ในนั้น มันควรจะง่ายที่จะทำงานใน IE7
— จิม
4
ฉันสนใจคำตอบสำหรับเบราว์เซอร์ทั้งหมด!
— minty
15
"น่าจะเป็นเรื่องเล็กน้อยที่จะได้ทำงานใน IE7" จิมนั่นคุณเหรอ? คุณเป็นผู้จัดการโครงการของฉันหรือไม่ :)
— Aaronius

คำตอบ:

53

ฉันต้องหาคำตอบเดียวกัน ตัวอย่างที่ดีที่สุดที่ฉันพบคือhttp://www.cssplay.co.uk/menu/tablescroll.html - ฉันพบว่าตัวอย่าง # 2 ทำงานได้ดีสำหรับฉัน คุณจะต้องกำหนดความสูงของตารางด้านในด้วยจาวาสคริปต์ส่วนที่เหลือคือ CSS

— เคนเพนน์
แหล่งที่มา
3
น่าเสียดายที่วิธีนี้ล้มเหลวเมื่อคุณมีตารางที่กว้าง (เลื่อนในแนวนอน) คุณจะมีแถบเลื่อนแนวนอนสองแถบ หนึ่งสำหรับส่วนหัวและอีกหนึ่งสำหรับข้อมูล
— vol7ron
4
โซลูชันของคุณไม่ทำงานหากคุณไม่ระบุความกว้าง <th> ภายใน <thead>
— Alexandru R
2
เพื่อให้เป็นไปตามมาตรฐาน (ค่อนข้าง) กองซ้อนใหม่ล้นคุณสามารถแก้ไขคำตอบนี้เพื่อรวมบิตที่เกี่ยวข้องจากลิงค์?
— คดีฟ้องร้องกองทุนโมนิก้า
บิลลี่อยู่ที่ไหน
— candlejack
เป็นไปไม่ได้ที่จะซิงโครไนซ์ความกว้างของคอลัมน์ระหว่างส่วนหัวและส่วนของตาราง (เลื่อนได้) โดยไม่ต้องใช้จาวาสคริปต์หรือค่าที่กำหนดไว้ล่วงหน้า
— rustyx
34

ฉันพบว่าDataTablesมีความยืดหยุ่น ในขณะที่รุ่นเริ่มต้นของมันจะขึ้นอยู่กับ jQuery, นอกจากนี้ยังมีปลั๊กอิน AngularJs

— Vitalii Fedorenko
แหล่งที่มา
ลื่นมาก - ฟังก์ชั่นส่วนใหญ่ใช้งานได้กับ S3, android 4.0.4 ของฉัน, แต่ไม่ใช่ตัวค้นหา / ตัวกรอง
— Jens Frandsen
12

ฉันเห็นโซลูชันที่ยอดเยี่ยมของ Sean Haddy สำหรับคำถามที่คล้ายกันและใช้เสรีภาพในการแก้ไข :

  • ใช้คลาสแทน ID ดังนั้นสคริปต์ jQuery หนึ่งรายการสามารถนำกลับมาใช้ซ้ำได้หลายตารางในหนึ่งหน้า
  • เพิ่มการสนับสนุนสำหรับองค์ประกอบตาราง HTML ความหมายเช่นคำบรรยายภาพ, thead, tfoot และ tbody
  • ทำแถบเลื่อนเป็นตัวเลือกเพื่อไม่ให้ปรากฏสำหรับตารางที่ "สั้นกว่า" ความสูงที่เลื่อนได้
  • ปรับความกว้างของการเลื่อน div เพื่อนำแถบเลื่อนขึ้นไปที่ขอบด้านขวาของตาราง
  • ทำให้แนวคิดเข้าถึงได้โดย
    • ใช้ aria-hidden = "true" บนส่วนหัวตารางแบบสแตติกที่ถูกฉีด
    • และปล่อย thead ดั้งเดิมให้อยู่ในนั้นซ่อนด้วย jQuery และ set aria-hidden="false"
  • แสดงตัวอย่างของหลายตารางที่มีขนาดแตกต่างกัน

แม้ว่าฌอนจะยกของหนัก ต้องขอบคุณ Matt Burland ด้วยเช่นกันสำหรับการชี้ให้เห็นว่าจำเป็นต้องสนับสนุน tfoot

โปรดดูด้วยตัวคุณเองที่http://jsfiddle.net/jhfrench/eNP2N/

— Jeromy French
แหล่งที่มา
ดี แต่มันขันถ้าคุณต้องการส่วนหัวและส่วนท้าย!
— Matt Burland
3
ขอบคุณ Matt ฉันทำการปรับเปลี่ยน
— Jeromy French
การจัดตำแหน่งต้อง tweaking ถ้าคุณแสดงเส้นขอบ td และ th
— dhochee
8

คุณลองใช้ thead และ tbody และตั้งค่าความสูงคงที่บน tbody ด้วย overflow: scroll หรือไม่?

เบราว์เซอร์เป้าหมายของคุณคืออะไร

แก้ไข: มันทำงานได้ดี (เกือบ) ใน firefox - การเพิ่ม scrollbar แนวตั้งทำให้ต้องใช้ scrollbar แนวนอนและ yuck IE เพิ่งตั้งค่าความสูงของแต่ละ td เป็นสิ่งที่ฉันระบุความสูงของ tbody ให้เป็น นี่คือสิ่งที่ดีที่สุดที่ฉันสามารถทำได้:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>
— Chris Marasti-Georg
แหล่งที่มา
1
ฉันต้องการที่จะกำหนดเป้าหมาย IE6, IE7, FF, โดยเฉพาะอย่างยิ่ง ... แต่น่าเสียดายที่ IE
— มิ้นต์
เปลี่ยนตารางเพื่อที่จะเป็นน้อยกว่า 100% ในความกว้างกล่าวว่า 99% และมันจะควรดูแลปัญหา
— WolfmanDragon
2
overflow-x: hidden;และoverflow-y: autoยังช่วย
— justkt
7
สิ่งนี้เคยทำงานใน firefox และมันเป็นรหัสที่ชัดเจนและไม่ใช่ cludgy อย่างไรก็ตามใน firefox รุ่นล่าสุดมันเสีย
— Rasmus Kaj
6
สิ่งนี้ไม่ทำงานเพราะ "ล้น" ใช้ได้เฉพาะกับ "บล็อกคอนเทนเนอร์" ( w3.org/TR/CSS21/visufx.html#overflow ) และกล่องตารางไม่ได้ "บล็อกคอนเทนเนอร์" ( w3.org/TR/CSS21/) visuren.html # block-boxes )
— mhsmith
8

สิ่งที่คุณต้องการคือ:

1) มีเนื้อความของตารางที่มีความสูง จำกัดเนื่องจากการเลื่อนเกิดขึ้นเฉพาะเมื่อเนื้อหามีขนาดใหญ่กว่าหน้าต่างการเลื่อน อย่างไรก็ตามtbodyไม่สามารถปรับขนาดได้และคุณต้องแสดงเป็นblock:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) ซิงค์ส่วนหัวของตารางและความกว้างคอลัมน์ของตารางอีกครั้งเพื่อทำให้ส่วนหลังเป็นblockองค์ประกอบที่ไม่เกี่ยวข้อง วิธีเดียวที่จะทำได้ก็คือการประสานจำลองโดยการบังคับใช้คอลัมน์เดียวกันความกว้างทั้ง

แต่เนื่องจากtbodyตัวเองเป็นตอนนี้มันจะไม่ทำตัวเหมือนblock tableเนื่องจากคุณยังต้องการtableพฤติกรรมในการแสดงคอลัมน์ของคุณอย่างถูกต้องวิธีแก้ไขคือการขอให้แต่ละแถวของคุณแสดงเป็นรายบุคคลtable:

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(โปรดทราบว่าการใช้เทคนิคนี้คุณจะไม่สามารถขยายข้ามแถวได้อีกต่อไป)

หลังจากที่ทำคุณสามารถบังคับใช้ความกว้างของคอลัมน์ที่จะมีความกว้างเท่ากันทั้งในและthead tbodyคุณทำไม่ได้:

  • แต่ละรายการสำหรับแต่ละคอลัมน์ (ผ่านคลาส CSS เฉพาะหรือการกำหนดสไตล์อินไลน์) ซึ่งค่อนข้างน่าเบื่อที่จะทำสำหรับแต่ละอินสแตนซ์ของตาราง
  • สม่ำเสมอสำหรับคอลัมน์ทั้งหมด (ผ่าน th, td { width: 20%; }หากคุณมี 5 คอลัมน์ตัวอย่าง) ซึ่งเป็นประโยชน์มากกว่า (ไม่จำเป็นต้องตั้งค่าความกว้างสำหรับแต่ละอินสแตนซ์ของตาราง) แต่ไม่สามารถทำงานกับจำนวนคอลัมน์ใด ๆ ได้
  • สม่ำเสมอสำหรับคอลัมน์ใด ๆ ที่นับผ่านเค้าโครงตารางคงที่

ฉันชอบตัวเลือกสุดท้ายที่ต้องการเพิ่ม:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

ดูตัวอย่างที่นี่แยกจากคำตอบสำหรับคำถามนี้

— Javarome
แหล่งที่มา
ขอบคุณสำหรับคำอธิบาย มันเป็นการหลอกลวงว่าสามารถทำสิ่งนี้ได้กี่วิธีและคำตอบส่วนใหญ่เพียงแค่นำเสนอโค้ดและลิงก์ plunkr บางส่วนเพื่อให้คุณคิดออกเอง
— Paul Rooney
4

แก้ไข:   นี่เป็นคำตอบที่เก่ามากและอยู่ที่นี่เพื่อความเจริญรุ่งเรืองเพียงเพื่อแสดงให้เห็นว่ามันได้รับการสนับสนุนครั้งเดียวในปี 2000 แต่ลดลงเพราะกลยุทธ์เบราว์เซอร์ในปี 2010 คือการเคารพข้อกำหนด W3C แม้ว่าคุณสมบัติบางอย่างจะถูกลบออก: ตารางเลื่อนได้ / ท้ายกระดาษถูกระบุอย่างงุ่มง่ามก่อน HTML5

ข่าวร้าย

น่าเสียดายที่ไม่มีวิธีที่สวยงามในการจัดการตารางที่เลื่อนได้ด้วยการกำหนดคงที่thead/ tfoot เนื่องจากข้อกำหนดของ HTML / CSS นั้นไม่ชัดเจนเกี่ยวกับคุณลักษณะนั้น

คำอธิบาย

แม้ว่าข้อมูลจำเพาะ HTML 4.01 จะระบุว่าthead/ tfoot/ tbodyใช้ (แนะนำหรือไม่) เพื่อเลื่อนส่วนของตาราง:

แถวของตารางอาจถูกจัดกลุ่ม [... ] โดยใช้องค์ประกอบ THEAD, TFOOT และ TBODY [... ] การแบ่งส่วนนี้ช่วยให้ตัวแทนผู้ใช้สามารถรองรับการเลื่อนของเนื้อหาตารางโดยไม่ขึ้นกับส่วนหัวและเท้าของตาราง

แต่คุณสมบัติตารางการทำงานที่เลื่อนได้บน FF 3.6 ถูกลบออกใน FF 3.7 เพราะถือว่าเป็นจุดบกพร่องเนื่องจากไม่สอดคล้องกับข้อกำหนดของ HTML / CSS ดูนี้และว่าความเห็นเกี่ยวกับข้อบกพร่อง FF

เคล็ดลับ Mozilla Developer Network

ด้านล่างนี้เป็นเวอร์ชันย่อของMDN เคล็ดลับที่มีประโยชน์สำหรับตารางที่เลื่อนได้
ดูหน้านี้ที่เก็บถาวรหรือเวอร์ชันภาษาฝรั่งเศสปัจจุบัน

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

อย่างไรก็ตาม MDN ยังกล่าวว่าสิ่งนี้ไม่ทำงานอีกต่อไปบน FF :-(
ฉันได้ทดสอบบน IE8 => ตารางไม่สามารถเลื่อนได้ทั้ง: - ((

— olibre
แหล่งที่มา
เคล็ดลับ MDN สำหรับลิงค์ตารางที่เลื่อนได้นั้นไม่ใช่ข้อมูลที่เกี่ยวข้อง แต่พูดถึงการยุบตัวของเส้นขอบ อาจจะเป็นหน้าเปลี่ยนเพราะ 5 ปีผ่านไป
— Partizanos
ขอบคุณ @partizanos ในที่สุดฉันก็ได้พบหน้า wiki ดั้งเดิมในประวัติ MDN! คำตอบเก่าของฉันดูเหมือนจะล้าสมัยแล้ว แต่เพื่อความเจริญรุ่งเรืองนักพัฒนารุ่นต่อไปจะรู้ว่ามันเป็นไปได้และง่ายต่อการนำกลับมาใช้ในยุค 2000 ;-) ไชโย
— olibre
3

ไม่แน่ใจว่าใครยังคงดูที่นี้ แต่พวกเขาวิธีที่ฉันได้ทำก่อนหน้านี้คือการใช้สองตารางเพื่อแสดงตารางต้นฉบับเดียว - ครั้งแรกเพียงบรรทัดชื่อตารางเดิมและไม่มีแถวร่างกายตาราง (หรือแถวร่างกายว่างเปล่าเพื่อให้ ตรวจสอบแล้ว)

ที่สองอยู่ใน div แยกและไม่มีชื่อและเพียงแถวร่างกายตารางเดิม div แยกทำให้เลื่อนได้

ตารางที่สองในส่วนของ div จะอยู่ด้านล่างของตารางแรกใน HTML และดูเหมือนว่าเป็นตารางเดียวที่มีส่วนหัวคงที่และส่วนล่างที่เลื่อนได้ ฉันเพิ่งทดสอบสิ่งนี้ใน Safari, Firefox และ IE (เวอร์ชันล่าสุดของแต่ละรุ่นใน Spring 2010) แต่มันใช้ได้ในทุกอย่าง

ปัญหาเดียวก็คือว่าตารางแรกจะไม่ตรวจสอบโดยไม่มีร่างกาย (ตรวจสอบ W3.org - XHTML 1.0 เข้มงวด) และเมื่อฉันเพิ่มหนึ่งไม่มีเนื้อหามันทำให้แถวว่าง คุณสามารถใช้ CSS เพื่อทำให้มองไม่เห็น แต่ยังคงกินพื้นที่บนหน้า

— มิก
แหล่งที่มา
แถวพิเศษจะใช้พื้นที่ยังไง ไม่จำเป็นต้องใช้พื้นที่หน้าจอใด ๆ หากคุณใช้display: none;นอกเสียจากว่าคุณหมายถึงพื้นที่ในซอร์ส .. ?
— ClarkeyBoy
3

โซลูชันนี้ใช้ได้กับ Chrome 35, Firefox 30 และ IE 11 (ไม่ผ่านการทดสอบรุ่นอื่น)

CSS ที่บริสุทธิ์: http://jsfiddle.net/ffabreti/d4sope1u/

ทุกอย่างถูกตั้งค่าให้แสดง: block, table ต้องการความสูง:

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
— เฟอร์นันโด Fabreti
แหล่งที่มา
2

สิ่งนี้ทำให้ฉันปวดหัวอย่างมากที่พยายามใช้กริดดังกล่าวสำหรับแอปพลิเคชันของเรา ฉันลองใช้เทคนิคต่าง ๆ ทั้งหมดที่นั่น แต่พวกเขาแต่ละคนมีปัญหา ฉันมาใกล้ที่สุดคือการใช้ปลั๊กอิน jQuery เช่นFlexigrid (ดูที่http://www.ajaxrain.comเพื่อหาทางเลือกอื่น ๆ ) แต่ดูเหมือนจะไม่สนับสนุนตารางกว้าง 100% ซึ่งเป็นสิ่งที่ฉันต้องการ

สิ่งที่ฉันทำลงเอยด้วยการม้วนตัวเอง; Firefox รองรับการเลื่อนtbodyองค์ประกอบดังนั้นฉันเบราว์เซอร์ดมกลิ่นและใช้ CSS ที่เหมาะสม (การตั้งค่าความสูงล้น ฯลฯ ... ถามว่าคุณต้องการรายละเอียดเพิ่มเติม) เพื่อให้เลื่อนที่และจากนั้นเบราว์เซอร์อื่น ๆ ฉันใช้สองตารางแยกตั้งเพื่อtable-layout: fixedใช้ขนาด อัลกอริทึมที่รับประกันว่าจะไม่ล้นขนาดที่ระบุ (ตารางปกติจะขยายเมื่อเนื้อหากว้างเกินกว่าจะพอดี) ด้วยการให้ความกว้างเท่ากันทั้งสองตารางทำให้ฉันสามารถจัดคอลัมน์ให้เรียงกันได้ ฉันห่ออันที่สองในชุด div เพื่อเลื่อนและด้วย pokery jiggery เล็กน้อยที่มีระยะขอบ ฯลฯ จัดการเพื่อให้ได้รูปลักษณ์ที่ฉันต้องการ

ขออภัยถ้าคำตอบนี้ฟังดูคลุมเครืออยู่บ้าง ฉันเขียนเร็วเพราะไม่มีเวลามาก แสดงความคิดเห็นหากคุณต้องการให้ฉันขยายเพิ่มเติมใด ๆ !

— ลุคเบนเน็ตต์
แหล่งที่มา
ขออภัยที่จะเรียกคืนเธรดเก่านี้อีกครั้ง แต่ฉันจำเป็นต้องรู้วิธีที่คุณทำออกมาจริงๆ ฉันทำงาน FF ได้ แต่ไม่ใช่เบราว์เซอร์ IE / WebKit โปรดช่วยเมื่อคุณสามารถ
— Alfero Chingono
2

นี่คือรหัสที่ใช้งานได้จริงสำหรับ IE และ FF (อย่างน้อย):

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

ฉันได้เปลี่ยนรหัสต้นฉบับเพื่อให้ชัดเจนยิ่งขึ้นและเพื่อให้ทำงานได้ดีใน IE และ FF ..

รหัสเดิมที่นี่

— Daniel Costa
แหล่งที่มา
1
ใน IE7 / 8 ใช้ได้กับโหมด Quirks เท่านั้นและจะหยุดทำงานทันทีที่คุณเพิ่ม doctype คือ<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
— ccpizza
1

นี่คือทางเลือกของฉัน นอกจากนี้ยังใช้ DIV ที่แตกต่างกันสำหรับส่วนหัวลำตัวและท้ายกระดาษ แต่ซิงโครไนซ์สำหรับปรับขนาดหน้าต่างและด้วยการค้นหาเลื่อนเรียงลำดับกรองและวางตำแหน่ง:

รายการซีดีของฉัน

คลิกที่ปุ่ม Jazz, Classical ... เพื่อดูตาราง มีการตั้งค่าเพื่อให้เพียงพอแม้ว่าจะปิด JavaScript

ดูเหมือนว่าตกลงบน IE, FF และ WebKit (Chrome, Safari)

— goneill
แหล่งที่มา
1

ขออภัยฉันไม่ได้อ่านการตอบคำถามของคุณทั้งหมด

ใช่ที่นี่สิ่งที่คุณต้องการ (ฉันได้ทำไปแล้ว)

คุณสามารถใช้สองตารางที่มีชื่อคลาสเดียวกันสำหรับสไตล์ที่คล้ายกันโดยหนึ่งมีเฉพาะที่ส่วนหัวของตารางและอีกอันหนึ่งเป็นแถวของคุณ ตอนนี้ใส่ตารางนี้ใน div ที่มีความสูงคงที่ด้วย overflow-y: auto หรือ scroll

— Sanuj
แหล่งที่มา
1

ปัญหาหลักที่ฉันมีกับคำแนะนำข้างต้นคือสามารถเสียบ tablesorter.js และสามารถลอยส่วนหัวสำหรับตารางที่ จำกัด ขนาดสูงสุดเฉพาะ ในที่สุดฉันก็เจอปลั๊กอินjQuery.floatTheadซึ่งให้ส่วนหัวลอยและอนุญาตให้เรียงลำดับเพื่อทำงานต่อไป

นอกจากนี้ยังมีหน้าการเปรียบเทียบที่ดีที่แสดงให้เห็นตัวเองเทียบกับปลั๊กอินที่คล้ายกัน

— Guy Hollington
แหล่งที่มา
1

สดJsFiddle

เป็นไปได้ด้วย HTML และ CSS เท่านั้น

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
ขยายตัวอย่างข้อมูล

— Md. Rafee
แหล่งที่มา
0

ถ้ามันตกลงที่จะใช้ JavaScript ที่นี่เป็นวิธีการแก้ปัญหาของฉันสร้างชุดตารางความกว้างคงที่ในทุกคอลัมน์ (พิกเซล!) เพิ่มคลาสเลื่อนไปที่ตารางและเพิ่ม javascript + jquery 1.4.x ชุดนี้ความสูงเป็น css หรือสไตล์!

ทดสอบใน: Opera, Chrome, Safari, FF, IE5.5 ( สคริปต์มหากาพย์ล้มเหลว ), IE6, IE7, IE8, IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

แก้ไข: ความสูงคงที่

— จางไป
แหล่งที่มา
0

ฉันทำสิ่งนี้กับ javascript (ไม่มีไลบรารี่) และ CSS - ตัวบอดี้ของตารางเลื่อนหน้าและตารางไม่จำเป็นต้องมีความกว้างหรือความสูงคงที่แม้ว่าแต่ละคอลัมน์จะต้องมีความกว้าง คุณยังสามารถเรียงลำดับการทำงานได้

โดยทั่วไป:

  1. ใน HTML ให้สร้าง container divs เพื่อวางตำแหน่งแถวส่วนหัวของตารางและเนื้อความของตารางสร้าง div "mask" เพื่อซ่อนเนื้อหาของตารางขณะที่เลื่อนผ่านส่วนหัว

  2. ใน CSS ให้แปลงส่วนตารางเป็นบล็อก

  3. ใน Javascript รับความกว้างของตารางและจับคู่ความกว้างของหน้ากาก ... รับความสูงของเนื้อหาของหน้า ... วัดตำแหน่งเลื่อน ... ปรับแต่ง CSS เพื่อกำหนดตำแหน่งแถวส่วนหัวของตารางและความสูงของหน้ากาก

นี่คือ javascript และjsFiddle DEMO

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
— เดโบราห์
แหล่งที่มา
แต่ในการสาธิตของคุณส่วนหัวของตารางไม่คงอยู่มันแค่เลื่อนออกไป (Chrome ที่นี่)
— Sz.
ฉันไม่เห็นสิ่งนั้นใน Chrome คุณแน่ใจหรือไม่ว่าไม่ได้เน้นเซลล์ที่เน้นสีเหลืองพร้อมคำแนะนำเป็นสีแดงสำหรับส่วนหัว เซลล์ส่วนหัวอยู่ที่ด้านบนและเป็นสีเทาบนสีเทา ("Col 1", "Col 2" ฯลฯ )
— เดโบราห์
0

สำหรับฉันไม่มีอะไรที่เกี่ยวข้องกับการเลื่อนได้ผลจริงๆจนกว่าฉันจะลบความกว้างออกจากตาราง CSS เริ่มแรก CSS ของตารางมีลักษณะดังนี้:

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

ทันทีที่ฉันลบความกว้าง: 100%; คุณลักษณะการเลื่อนทั้งหมดเริ่มทำงาน

— Matthew Park
แหล่งที่มา
0

หากคุณมีมาตรฐานต่ำพอ;) คุณสามารถวางตารางที่มีเฉพาะส่วนหัวเหนือตารางที่มีเนื้อหาเท่านั้น มันจะไม่เลื่อนในแนวนอน แต่ถ้าคุณไม่ต้องการมัน ...

— M610
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.