เมื่อสร้างเว็บเพจ เรามักจะประสบปัญหาเรื่องความกว้างของตารางไม่ตรงแนว ฉันได้ดูรายละเอียดการตั้งค่าความสูงและความกว้างของแท็กตารางในรูปแบบ HTML โดยละเอียดแล้ว และตอนนี้ฉันสรุปได้ดังนี้:
1. การตั้งค่าความกว้างและความสูงในตารางและฟังก์ชัน : ความสูงที่ตั้งไว้ในตารางจะเป็นการตั้งค่าขั้นต่ำจริงๆ นั่นคือ เมื่อเนื้อหาในตารางหรือความสูงของแถวรวมเกินค่าที่ตั้งไว้ ค่าความสูงของ ตารางจะถูกขยายโดยอัตโนมัติ เมื่อเนื้อหาหรือความสูงของแถวในตารางไม่ถึงค่านี้ ก็จะขยายเป็นค่านี้โดยอัตโนมัติ โดยทั่วไปค่าความกว้างที่ตั้งไว้ในตารางจะเป็นค่าสูงสุดของความกว้างของตาราง และไม่สามารถเปลี่ยนแปลงได้ แม้ว่าความกว้างของเนื้อหาภายในจะเกินก็ตาม (หากเนื้อหาภายในเป็นรูปภาพ ความกว้างของตารางสามารถเปลี่ยนแปลงได้)
2. การตั้งค่าความกว้างและความสูงในแท็ก tr และฟังก์ชัน : การตั้งค่าความกว้างในแท็ก tr จะไม่มีผลใดๆ เนื่องจากดังที่เห็นได้จากจุดแรก ความกว้างของตารางไม่สามารถเปลี่ยนแปลงได้ และแท็ก tr จะ แน่นอนว่าไม่มีผลอะไร ดังนั้นจึงเป็นไปได้เฉพาะที่จะหารือเกี่ยวกับการตั้งค่าความสูงใน tr เท่านั้น การตั้งค่าความสูงใน tr นั้นเกี่ยวข้องกับการตั้งค่าระหว่างหลาย ๆ tr เมื่อตั้งค่าความสูงไว้หลายค่า ความสูงของ tr แต่ละรายการจะถูกจัดสรรให้กับค่าความสูงรวมตามสัดส่วนของค่าที่ตั้งไว้ เมื่อหลาย trs ไม่ได้ตั้งค่าความสูงเฉพาะ ค่าความสูงทั้งหมดจะถูกกระจายเท่าๆ กัน เมื่อ TR บางตัวมีการตั้งค่าเฉพาะและบางตัวไม่ได้ตั้งค่าเฉพาะเป็นค่าเริ่มต้น ขั้นแรกให้ตรวจสอบความต้องการพื้นฐานของ TR แต่ละตัว จากนั้นจึงตอบสนอง TR ที่เหลือด้วยการตั้งค่าเฉพาะ จากนั้น TR ทั้งหมด โดยไม่ต้องตั้งค่าเฉพาะ tr ในกรณีสุดท้าย เราต้องพิจารณาสถานการณ์ที่ความกว้างทั้งหมดไม่เพียงพอสำหรับค่าการตั้งค่ารวมของ tr หากไม่เพียงพอ จะต้องเป็นไปตามความต้องการพื้นฐานของ tr ความสูงของตารางจะเป็นไปโดยอัตโนมัติ ขยายที่นี่ จากนั้นพิจารณา tr ด้วยชุดความสูง และสุดท้ายพิจารณา tr โดยไม่ตั้งค่าความสูง
3. การตั้งค่าความกว้างและความสูงและฟังก์ชันในแท็ก td : ความกว้างและความสูงในแท็ก td นั้นใช้ได้ผลทั้งคู่ มาดูความกว้างของ TD กันก่อน ความกว้างของ TD แต่ละตัวจะสัมพันธ์กับความกว้างของ TD แต่ละตัวในคอลัมน์นี้ ความกว้างที่ใหญ่ที่สุดจะถือเป็นความกว้างของ TD แต่ละตัวในคอลัมน์นี้ โดยที่คุณจะต้องเข้าใจความกว้างของ TD บางตัวจากมุมมองโดยรวม คุณไม่สามารถระบุความกว้างได้จากการตั้งค่าความกว้างของค่านี้ ซึ่งถือว่าไม่ถูกต้อง เมื่อเราทราบความกว้างของแต่ละคอลัมน์แล้ว สิ่งต่างๆ ก็จะง่ายขึ้น ในขณะนี้ การกระจายความกว้างระหว่าง TD แต่ละตัวจะขึ้นอยู่กับกฎการกระจายความสูงของ tr แต่ละตัวในบทความที่สอง ข้อแตกต่างประการหนึ่งก็คือ โดยค่าเริ่มต้น ความกว้างของ TD แต่ละตัวจะไม่กระจายเท่ากัน แต่เป็นสัดส่วนตามความเป็นจริง เนื้อหา. มาดูการตั้งค่าความสูงของ td กัน ซึ่งค่อนข้างง่าย อย่างไรก็ตาม ความสูงของแต่ละ td ขึ้นอยู่กับความสูงสูงสุดของแถวที่ค่า td อยู่เพื่อกำหนดความสูงของแต่ละ td ในแถวนี้ ของแต่ละแถวถูกกำหนดโดยหลักการจัดสรรความสูงเหมือนกัน สิ่งที่ควรทราบอีกประการหนึ่งคือความสัมพันธ์ระหว่างความสูงของ td และความสูงของ tr ก่อนอื่นจะต้องขึ้นอยู่กับความต้องการของเนื้อหา บนพื้นฐานนี้ จะพิจารณาจากค่าที่ตั้งไว้ แล้วแต่ว่าค่าใดจะมากกว่าหากมีค่าที่ตั้งไว้และอีกค่าหนึ่งไม่มี ค่าที่ตั้งไว้ จากนั้นจะใช้ค่าที่ตั้งไว้
1. ใช้วิธีการแบบดั้งเดิม
<ความกว้างของตาราง=400> <tr> <td width=100></td> <td width=100></td> <td width=100></td> <td width=100></td> < /tr> <ตาราง>
2. ใช้ CSS
<style>.td{width:100px;}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td class=td> </td> <td class=td></td> </tr> <table>ปัญหาที่เป็นไปได้ของสองวิธีข้างต้นคือ หากเนื้อหาเกินการตั้งค่า เช่น ความกว้างของภาพมากกว่า 100 มันจะขยายและปรับความกว้างของตารางโดยอัตโนมัติ
3. ใช้ CSS
<style>.td{width:100px;overflow:hidden}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td คลาส =td></td> <td class=td></td> </tr> <table>เมื่อใช้วิธีการนี้ คุณสามารถซ่อนส่วนที่เกินได้ หากคุณต้องการการควบคุมที่เข้มงวด คุณสามารถใช้วิธีนี้ได้ หากคุณตั้งค่าแอตทริบิวต์โอเวอร์โฟลว์เพื่อเลื่อนหรืออัตโนมัติ คุณสามารถใช้วิธีนี้ได้ หากคุณตั้งค่าแอตทริบิวต์โอเวอร์โฟลว์เพื่อเลื่อน หรืออัตโนมัติ คุณสามารถใช้วิธีนี้ได้ หากคุณตั้งค่าแอตทริบิวต์โอเวอร์โฟลว์เป็นเลื่อนหรืออัตโนมัติ คุณสามารถใช้วิธีนี้ได้ หากตั้งค่าเป็นเลื่อนหรืออัตโนมัติ คุณสามารถใช้แถบเลื่อนเพื่อปรับเมื่อเกิน...
สรุปข้างต้นเป็นวิธีการตั้งค่าความกว้างและความสูงของเซลล์ตาราง HTML ที่ตัวแก้ไขแนะนำให้คุณ เวลา. ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!