คำถามติดแท็ก html-table

ฉันกำลังเขียนหน้าที่ฉันต้องการตาราง html เพื่อรักษาขนาดที่ตั้งไว้ ฉันต้องการส่วนหัวที่ด้านบนสุดของตารางเพื่อให้อยู่ตรงนั้นตลอดเวลา แต่ฉันก็ต้องใช้ส่วนของตารางเพื่อเลื่อนไม่ว่าจะเพิ่มแถวลงในตารางกี่แถวก็ตาม ฉันต้องการให้ดูเหมือนวิธีที่ 2 ใน url นี้: http://www.cssplay.co.uk/menu/tablescroll.html ฉันได้ลองทำสิ่งนี้แล้ว แต่ไม่มีแถบเลื่อนปรากฏขึ้น: tbody { height: 80em; overflow: scroll; } <table border=1 id="qandatbl" align="center"> <tr> <th class="col1">Question No</th> <th class="col2">Option Type</th> <th class="col1">Duration</th> </tr> <tbody> <tr> <td class='qid'></td> <td class="options"></td> <td class="duration"></td> </tr> </tbody> </table> เรียกใช้ข้อมูลโค้ดHide resultsขยายข้อมูลโค้ด

86 html  css  scroll  html-table  overflow 

ฉันมีตาราง "sortable" ที่ส่วนหัวของคอลัมน์เรียงปัจจุบันแสดงไอคอน: ไอคอนการเรียงจะแสดงที่ท้ายข้อความ (เช่นเรากำลังสนับสนุน LTR / RTL) display:flexฉันกำลังใช้ อย่างไรก็ตามหากความกว้างของตารางลดลงและข้อความส่วนหัวของคอลัมน์เริ่มล้อมรอบฉันทำงานในสถานะที่ไม่ชัดเจนซึ่งไม่ชัดเจนว่าจะเรียงคอลัมน์ใด: ฉันต้องการที่จะปฏิบัติตามข้อกำหนดต่อไปนี้แทน: ไอคอนจะถูก "ชิด" เสมอกับ "จุดสิ้นสุด" ของบรรทัดข้อความที่ยาวที่สุด (แม้ว่าเซลล์ / ปุ่มตัดจะกว้างขึ้น) ไอคอนควรจัดเรียงชิดล่างสุดกับแถวสุดท้ายของข้อความ ไอคอนไม่ควรพันบนบรรทัดของมันเอง ปุ่มต้องมีอยู่และควรขยายความกว้างเต็มของเซลล์ (เป็นสไตล์ภายในและมาร์กอัปสามารถเปลี่ยนแปลงได้ตามต้องการ) CSS และ HTML เฉพาะในกรณีที่เป็นไปได้ทั้งหมด ไม่สามารถพึ่งพาความกว้างของคอลัมน์ที่ทราบ / ชุดหรือข้อความส่วนหัว ตัวอย่างเช่น: ฉันได้รับการทดสอบด้วยพวงของการรวมกันของdisplay: inline/inline-block/flex/grid, position, ::before/::afterและแม้กระทั่งfloat(!) แต่ไม่สามารถรับพฤติกรรมที่ต้องการ นี่คือรหัสปัจจุบันของฉันแสดงให้เห็นถึงปัญหา: .table { border-collapse: collapse; width: 100%; } .thead { border-bottom: 3px solid #d0d3d3; …

9 html  css  layout  html-table  alignment