เพื่อให้สามารถ<tbody>เลื่อนองค์ประกอบได้เราจำเป็นต้องเปลี่ยนวิธีการแสดงผลบนหน้าเว็บเช่นใช้display: block;เพื่อแสดงว่าเป็นองค์ประกอบระดับบล็อก
เนื่องจากเราเปลี่ยนdisplayคุณสมบัติของtbodyเราควรเปลี่ยนคุณสมบัติของtheadองค์ประกอบเช่นกันเพื่อป้องกันไม่ให้เค้าโครงตารางแตก
ดังนั้นเราจึงมี:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
เว็บเบราว์เซอร์แสดงtheadและtbodyองค์ประกอบเป็นกลุ่มแถว ( table-header-groupและtable-row-group) ตามค่าเริ่มต้น
เมื่อเราเปลี่ยนสิ่งนั้นtrองค์ประกอบภายในจะไม่เติมพื้นที่ทั้งหมดของคอนเทนเนอร์
ในการแก้ไขนั้นเราต้องคำนวณความกว้างของtbodyคอลัมน์และใช้ค่าที่สอดคล้องกับtheadคอลัมน์ผ่านทาง JavaScript
คอลัมน์ความกว้างอัตโนมัติ
นี่คือรุ่น jQuery ของตรรกะด้านบน:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
และนี่คือผลลัพธ์(ใน Windows 7 Chrome 32) :
ทำงาน DEMO
ตารางความกว้างเต็ม, คอลัมน์ความกว้างสัมพัทธ์
ตามที่ผู้โพสต์ดั้งเดิมต้องการเราสามารถขยายได้tableถึง 100% ของwidthคอนเทนเนอร์แล้วใช้ญาติ ( ร้อยละ ) widthสำหรับแต่ละคอลัมน์ของตาราง
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
เนื่องจากตารางมี (ประเภท) รูปแบบของเหลวเราควรปรับความกว้างของtheadคอลัมน์เมื่อปรับขนาดภาชนะ
ดังนั้นเราควรตั้งค่าความกว้างของคอลัมน์เมื่อปรับขนาดหน้าต่างแล้ว:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
ผลลัพธ์จะเป็น:
ทำงาน DEMO
การสนับสนุนเบราว์เซอร์และทางเลือก
ฉันได้ทดสอบทั้งสองวิธีข้างต้นใน Windows 7 ผ่านเว็บเบราว์เซอร์หลักรุ่นใหม่ (รวมถึง IE10 +) และใช้งานได้
อย่างไรก็ตามมันไม่ ทำงาน อย่างถูกต้อง ใน IE9และด้านล่าง
นั่นเป็นเพราะในเค้าโครงตารางองค์ประกอบทั้งหมดควรเป็นไปตามคุณสมบัติโครงสร้างเดียวกัน
โดยใช้display: block;สำหรับ<thead>และ<tbody>องค์ประกอบเราได้ทำลายโครงสร้างตาราง
ออกแบบเลย์เอาต์ใหม่ผ่าน JavaScript
วิธีหนึ่งคือการออกแบบเค้าโครงตาราง (ทั้งหมด) ใหม่ ใช้ JavaScript เพื่อสร้างเค้าโครงใหม่ได้ทันทีและจัดการและ / หรือปรับความกว้าง / ความสูงของเซลล์แบบไดนามิก
ตัวอย่างเช่นลองดูตัวอย่างต่อไปนี้:
ตารางทำรัง
วิธีนี้ใช้ตารางที่ซ้อนกันสองตัวพร้อมกับ div ที่มีอยู่ ครั้งแรกtableมีเพียงเซลล์เดียวที่มีdivและตารางที่สองถูกวางไว้ภายในdivองค์ประกอบนั้น
ตรวจสอบตารางการเลื่อนแนวตั้งที่CSS เล่น
สิ่งนี้ใช้ได้กับเว็บเบราว์เซอร์ส่วนใหญ่ นอกจากนี้เรายังสามารถทำตรรกะข้างต้นแบบไดนามิกผ่านทาง JavaScript
ตารางที่มีส่วนหัวคงที่ในการเลื่อน
เนื่องจากจุดประสงค์ในการเพิ่มแถบเลื่อนแนวตั้งลง<tbody>ในตารางแสดงส่วนหัวที่ด้านบนของแต่ละแถวเราสามารถวางตำแหน่งtheadองค์ประกอบที่จะเข้าพักfixedที่ด้านบนของหน้าจอแทน
นี่คือการสาธิตการทำงานของวิธีการนี้ดำเนินการโดยมั๊ย
มีการสนับสนุนเว็บเบราว์เซอร์ที่มีแนวโน้ม
และนี่บริสุทธิ์ CSSการดำเนินงานโดยวิลเล็มแวน Bockstal
โซลูชัน CSS เพียว
นี่คือคำตอบเก่า แน่นอนฉันได้เพิ่มวิธีการใหม่และปรับปรุงการประกาศ CSS
ตารางที่มีความกว้างคงที่
ในกรณีนี้tableควรมีการแก้ไขwidth (รวมถึงผลรวมของความกว้างของคอลัมน์และความกว้างของแถบเลื่อนแนวตั้ง) (รวมผลรวมของความกว้างคอลัมน์และความกว้างของแนวตั้งเลื่อนแถบ)
แต่ละคอลัมน์ควรจะมีเฉพาะความกว้างและคอลัมน์สุดท้ายของtheadองค์ประกอบความต้องการมากขึ้นความกว้างซึ่งเท่ากับคนอื่น ๆความกว้างด้าน + ความกว้างของแถบเลื่อนแนวตั้ง
ดังนั้น CSS จะเป็น:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
นี่คือผลลัพธ์:
สาธิตการทำงานDEMO
ตารางที่มีความกว้าง 100%
ในวิธีการtableนี้มีความกว้าง100%และสำหรับแต่ละthและtdมูลค่าของwidthทรัพย์สินควรน้อยกว่า100% / number of colsคุณสมบัติที่ควรจะน้อยกว่า
นอกจากนี้เราต้องลดความกว้างของtheadตามค่าความกว้างของแถบเลื่อนแนวตั้ง
เพื่อที่จะทำเช่นนั้นเราจำเป็นต้องใช้calc()ฟังก์ชั่นCSS3 ดังต่อไปนี้:
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
นี่คือการสาธิตออนไลน์
หมายเหตุ:วิธีการนี้จะล้มเหลวถ้าเนื้อหาของแต่ละแบ่งคอลัมน์บรรทัดเช่นเนื้อหาของแต่ละเซลล์ควรจะเพียงพอสั้น
ในตัวอย่างต่อไปนี้มีสองตัวอย่างง่ายๆของโซลูชัน CSS บริสุทธิ์ที่ฉันสร้างขึ้นเมื่อฉันตอบคำถามนี้
นี่คือjsFiddle Demo v2 v2
รุ่นเก่า: jsFiddle Demo v1
