ฉันมีตารางที่มีหลายแถวในเพจของฉัน ฉันต้องการกำหนดความสูงของตารางพูดเป็น 500px เช่นถ้าความสูงของโต๊ะใหญ่กว่านั้นแถบเลื่อนแนวตั้งจะปรากฏขึ้น ฉันพยายามใช้heightแอตทริบิวต์CSS tableแต่ไม่ได้ผล
คำตอบ:
ลองใช้overflowคุณสมบัติ CSS นอกจากนี้ยังมีคุณสมบัติแยกต่างหากเพื่อกำหนดลักษณะการทำงานของโอเวอร์โฟลว์แนวนอน ( overflow-x) และโอเวอร์โฟลว์แนวตั้ง ( overflow-y)
เนื่องจากคุณต้องการเพียงการเลื่อนแนวตั้งให้ลองทำดังนี้:
table {
height: 500px;
overflow-y: scroll;
}
แก้ไข:
เห็นได้ชัดว่า<table>องค์ประกอบไม่เคารพoverflowทรัพย์สิน สิ่งนี้ดูเหมือนจะเป็นเพราะ<table>องค์ประกอบไม่ได้รับการแสดงผลdisplay: blockตามค่าเริ่มต้น (จริงๆแล้วมีประเภทการแสดงผลของตัวเอง) คุณสามารถบังคับให้overflowคุณสมบัติทำงานได้โดยตั้งค่า<table>องค์ประกอบเป็นประเภทบล็อก:
table {
display: block;
height: 500px;
overflow-y: scroll;
}
โปรดทราบว่าสิ่งนี้จะทำให้องค์ประกอบมีความกว้าง 100% ดังนั้นหากคุณไม่ต้องการให้ใช้ความกว้างแนวนอนทั้งหมดของหน้าคุณจะต้องระบุความกว้างที่ชัดเจนสำหรับองค์ประกอบด้วย
คุณต้องห่อตารางไว้ในองค์ประกอบอื่นและตั้งค่าความสูงขององค์ประกอบนั้น ตัวอย่างด้วย inline css:
<div style="height: 500px; overflow: auto;">
<table>
</table>
</div>
display:table;แถวdisplay:table-row;และเซลล์ที่จะมีdisplay:table-cell;จากนั้นตารางทั้งสองจะจับคู่กันและดูเหมือนจะเป็นหนึ่งเดียว (หมายเหตุ: วิธีนี้ใช้ไม่ได้กับตารางขนาดใหญ่มากโดยทั่วไปแล้วจะจับคู่กับตารางเหล่านี้เมื่อทำได้ฉันใช้เทคนิคนี้หลายครั้ง)
ในการกำหนดความสูงของตารางคุณต้องตั้งค่าคุณสมบัติ css "display: block" ก่อนจากนั้นคุณสามารถเพิ่มคุณสมบัติ "width / height" ได้ ฉันพบว่าบทความ Mozilla นี้เป็นแหล่งข้อมูลที่ดีมากในการเรียนรู้วิธีจัดรูปแบบตาราง: ลิงก์
max-heightแทนheightเช่นเดียวกับหลังจะบังคับให้ความสูงของโต๊ะเป็น500px