บางทีเมื่อฉันได้รับชื่อนี้ในบทความนี้มีคนถามว่า: ทำไมคุณยังติดตามตาราง? มันล้าสมัยไปแล้ว ... รีบไป XHTML ... Div ดี ... ul ดี ... ol ดี ... dl ดี ... dl ดี ... นี่เสร็จแล้วฉันไม่รู้ว่าอะไรดีกว่า
ตารางล้าสมัยจริงๆหรือไม่? คุณรู้จักโต๊ะจริงเหรอ? คุณใช้ตารางจริงหรือ?
เราไม่ใช่สิ่งที่เราต้องทำเพื่อต่อสู้กับการต่อสู้ด้วยวาจาดังนั้นขอให้มันถูกทิ้งให้กับผู้ที่มีเวลาเหลือเฟือ
กลับไปที่หัวข้อ:
ฉันจำไม่ได้ว่าเมื่อมีคนใช้ตารางเพื่อจำลอง DataGrid และพูดว่าทำไมข้อความ TD ที่ไม่สามารถซ่อนความกว้างคงที่จะถูกซ่อนอยู่ แต่จะห่อเส้นโดยตรง
ใช่มันเป็นเช่น:
เรียกใช้รหัสดังกล่าวข้างต้นและคุณจะพบว่าข้อความในเซลล์ที่เกินความกว้างคงที่จะไม่ถูกซ่อนอยู่ แต่จะแสดงด้วยบรรทัดใหม่ เห็นได้ชัดว่านี่ไม่ใช่สิ่งที่ฉันหมายถึง
ดูเหมือนว่านี่จะเป็นคุณสมบัติของตาราง ไม่สามารถรองรับการรวมกันของ {width:*px; space สีขาว: nowrap; overflow: ซ่อน;} ดีมาก ในการวิเคราะห์ขั้นสุดท้ายพื้นที่สีขาว: NowRap ไม่ทำงานดังนั้นดูเหมือนว่าล้น: ซ่อนอยู่ไม่ถูกต้อง {หมายเหตุ: หากเป็นชุดของตัวละครที่ไม่มีความหมายก็อาจมีผล ตัวอย่างเช่น: <td class = col1> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa เป็นคำที่ไม่มีเส้นแบ่งบรรทัดดังนั้นความกว้างที่เกิน. col1 จะถูกซ่อน}
[โซลูชัน 1:]
ต่อมามีคนกล่าวว่าการใช้ความกว้างเปอร์เซ็นต์นั้นเพียงพอแล้ว หลังจากการทดสอบมันเป็นไปได้จริง ฉันปรับเปลี่ยนรูปแบบของหลายบรรทัดของวรรคแรกเล็กน้อยและอื่น ๆ ยังคงไม่เปลี่ยนแปลง:
.Col1 {ความกว้าง: 20%;}
.COL2 {ความกว้าง: 40%;}
.Col3 {ความกว้าง: 40%;}
หลังจากเรียกใช้รหัสที่แก้ไขแล้วคุณจะพบว่าข้อความที่อยู่นอกเหนือความกว้างนั้นถูกซ่อนไว้อย่างแน่นอนและดูเหมือนว่าจะได้รับเอฟเฟกต์ที่ต้องการ
ในความเป็นจริงการใช้ความกว้างเปอร์เซ็นต์จะช่วยแก้ปัญหาการซ่อนข้อความนี้ แต่ดูเหมือนจะไม่เป็นทางออกที่ดีที่สุดที่ต้องการเพราะบางครั้งเราต้องการความกว้างคงที่ไม่ใช่ความกว้างเปอร์เซ็นต์
รากของทั้งหมดนี้อยู่ในวิธีการสร้างข้อความในเซลล์จะแสดงในหนึ่งบรรทัดโดยไม่ต้องห่อเส้น
[โซลูชัน 2:]
เพื่อตอบสนองความต้องการนี้นอกเหนือจากการใช้สไตล์แล้วเราอาจนึกถึงฉลากที่เราไม่ได้ใช้มานานแล้ว ฟังก์ชั่นขององค์ประกอบนี้คือการบังคับให้แสดงเนื้อหาในหนึ่งบรรทัด รหัสข้างต้นได้รับการแก้ไขดังนี้และอื่น ๆ ยังคงไม่เปลี่ยนแปลง:
<table border = 1 cellpacing = 0 summary = มองย้อนกลับไปดูที่ตาราง: TD ยังเล่นล้น: ซ่อน>
<tr>
<td class = col1> <nobr> เซินโจว Elegant Q400n </nobr> </td>
<td class = col2> <nobr> q400n ที่สง่างามโดยใช้โปรเซสเซอร์ Intel Core2 Duo (Merom) T5450 (1.66G) </nobr> </td>
<td class = col3> <nobr> แพลตฟอร์ม Xunchi 4, คุ้มค่าที่ยอดเยี่ยม, รูปลักษณ์ที่สวยงาม </nobr> </td>
</tr>
</table>
หลังจากทำการดัดแปลงนี้คุณจะพบว่าผลกระทบนั้นเกิดขึ้นจริง คุณควรตื่นเต้นไหม ไม่นี่ดูเหมือนจะไม่เป็นทางออกที่ดีที่สุดเพราะหลังจากทั้งหมดมันค่อนข้างไม่เป็นที่พอใจที่จะใช้เครื่องหมายองค์ประกอบที่ไม่ได้ใช้เป็นเวลานานและไม่แนะนำ
หลังจากความคิดนี้ฉันได้พิจารณาปัญหานี้จากมุมมองที่แตกต่างกันและพบว่าปัญหาสามารถแก้ไขได้อย่างง่ายดาย
เนื่องจากเราไม่สามารถเพิ่มอวกาศสีขาวได้: NowRap to TH และ TD ในเซลล์ความกว้างคงที่แล้วเราจะเพิ่มองค์ประกอบเครื่องหมายอื่นลงในเซลล์ความกว้างคงที่?
ทางออกที่ดีที่สุด:
การเรียกใช้รหัสด้านบนจะพบว่าวิธีการนี้ใช้ได้และในแง่ของความเรียบง่ายความสามารถในการอ่านและความเป็นเหตุเป็นผลของรหัสได้ดีกว่าโซลูชันก่อนหน้า
{นักเรียนที่ไม่ได้ซ่อนเนื้อหาเกินความกว้างคงที่สำหรับเซลล์สามารถเล่นบนเครื่องก่อนจากนั้นอ่านบทความนี้}
ในความเป็นจริงตารางเป็นสิ่งที่น่าสนใจและเล่นได้ เราไม่ควรมองด้วยตาสีเพราะมันมีเหตุผลของตัวเอง
ฉันจะเขียนบทความเกี่ยวกับตารางในภายหลังและทำหน้าที่เป็นความบันเทิงในตนเอง