ใน Aspro: ถัดไป เริ่มตั้งแต่เวอร์ชัน 1.1.7 คุณสามารถปรับเปลี่ยนตารางได้ รุ่นมือถือ. จำเป็นต้องทำการเปลี่ยนแปลง แหล่งที่มาหน้า - เพิ่มคลาสที่รับผิดชอบในการปรับตัวของตาราง

ตารางแบบธรรมดาในเวอร์ชันมือถือเป็นมากกว่าแค่หน้าเพจ

หากต้องการทำให้ตารางตอบสนอง ให้ไปที่แก้ไขหน้าที่เพิ่มตาราง จากนั้นไปที่โหมดแก้ไขซอร์สโค้ด

ก่อนแท็กเปิด

เพิ่มแท็กกับคลาส

หลังแท็กปิด

ใส่แท็ก

...

บันทึกการเปลี่ยนแปลงของคุณ

ตอนนี้ตารางเลื่อนและไม่เกินเฟรม

เมื่อเลื่อนในแนวนอน ตารางจะไม่เกินกรอบ แต่เมื่อเลื่อนไปทางขวาในเวอร์ชันมือถือ เมนูด้านข้างจะเปิดขึ้น เพื่อให้แน่ใจว่าเมนูไม่รบกวนการทำงานกับตาราง คุณต้องทำการเปลี่ยนแปลงโค้ดของเพจ

เราจำเป็นต้องเพิ่มคลาส "swipeignore" ให้กับแท็กที่เราเพิ่มไว้ก่อนหน้านี้ ส่งผลให้ก่อนติดแท็ก

ต้องระบุแท็กที่มีคลาส

...

บันทึกการเปลี่ยนแปลงของคุณ

ตอนนี้เมื่อเลื่อนตารางไปทางขวา เมนูด้านข้างจะไม่เปิดขึ้น ซึ่งรบกวนการทำงานกับตาราง

คุณสามารถซ่อนเมนูด้านข้างได้เมื่อเลื่อนไปทางขวาและบนหน้าอื่นๆ คุณต้องเพิ่มคลาส "swipeignore" ให้กับแท็กบล็อกที่คุณต้องการลบการแสดงเมนูด้านข้าง หากแท็กไม่ได้ระบุคลาส แท็กจะอยู่ในรูปแบบ หากแท็กได้เพิ่มคลาสแล้ว ให้เขียน “swipeignore” โดยคั่นด้วยการเว้นวรรค เช่น

หากคุณใช้ตารางบนไซต์ ก็ต้องปรับเปลี่ยนตารางเหล่านั้นด้วย อุปกรณ์เคลื่อนที่. ฉันใช้ตัวเลือกการปรับตัวสองแบบ - การบีบอัดและการตัดคำ + การจัดเรียงตารางในคอลัมน์เดียว

ตัวเลือกแรกเหมาะสำหรับตารางแบบหลายคอลัมน์ทั้งหมด ฉันใช้ตัวเลือกที่สองในบางไซต์ในส่วนหน้า มีจุดอ่อนในการแสดงเมนูในรูปแบบของตาราง แต่เมื่อความละเอียดลดลงเมนูเหล่านั้นจะถูกบีบอัดมากจนทำให้เกิดความขุ่นเคืองในหมู่ผู้ใช้ การแปลด้วยความละเอียดต่ำในหนึ่งคอลัมน์ - การตัดสินใจที่ดีแต่ขอย้ำอีกครั้งว่าคุณไม่ควรใช้กับทุกตาราง

ตัวเลือกพื้นฐาน

ดังนั้น สำหรับตารางส่วนใหญ่บนเว็บไซต์ ฉันใช้โค้ด css ต่อไปนี้:

หน้าจอ @media และ (ความกว้างสูงสุด:1000px)(td(word-break:break-all;)

ระบุว่าคำที่ไม่พอดีกับบล็อกควรเริ่มต้นด้วยความละเอียดน้อยกว่า 1,000 พิกเซล บรรทัดใหม่. ตัวอย่างเช่น ความละเอียด 1,000 ดูที่ไซต์ของคุณ เพราะการตั้งค่าความละเอียดให้ต่ำลงก็สมเหตุสมผล

บรรลุ จอแสดงผลที่ดีตารางสามารถทำได้โดยใช้รหัสคู่ใน CSS ฉันใช้คู่ขนาน:

@media screen และ (max-width:700px)(img(max-width:96% !important;height:auto !important;) iframe, textarea, input, button, send, video, object, embed(max-width: 99% !important;) ตาราง, span, div, ins(ความกว้างสูงสุด:100% !important;)

โดยระบุว่าด้วยความละเอียดน้อยกว่า 700 px ตารางจะแสดงในขนาด 100% นั่นคือถูกบีบอัด แต่ใช้ความกว้างของบล็อกทั้งหมด คุณสมบัติ!สำคัญระบุว่าจะนำไปใช้กับความละเอียดทั้งหมดที่เล็กกว่า 700px

การปรับตัวในคอลัมน์เดียว

การปรับตารางให้แสดงในคอลัมน์เดียวด้วยความละเอียดต่ำทำได้ยากกว่า ไม่เหมาะกับทุกโต๊ะแต่มักจำเป็น ขั้นแรก ให้ระบุคลาสดั้งเดิมสำหรับตาราง เช่น