เว็บไซต์แบบปรับเปลี่ยนได้เลิกเป็นที่สนใจมานานแล้วและกลายเป็นเรื่องธรรมดามากขึ้นเรื่อยๆ พิจารณาข่าวล่าสุดพร้อมอันดับ เครื่องมือค้นหา(หากใครไม่ทราบว่าเมื่อค้นหาบนอุปกรณ์เคลื่อนที่จะให้ความสำคัญกับไซต์แบบตอบสนอง) จำนวนไซต์ดังกล่าวจะยังคงเพิ่มขึ้นต่อไป หนึ่งสามารถต่อต้านการปรับตัวภายใต้ อุปกรณ์เคลื่อนที่หรือจะเข้าข้าง แต่ความจริงยังคงอยู่: ลูกค้าต้องการให้เว็บไซต์ของตนปรับเปลี่ยนมากขึ้นเรื่อยๆ และผู้ดูแลเว็บก็ต้องทำเช่นนี้

ปัญหาหลักประการหนึ่งเมื่อปรับไซต์ให้มีความละเอียดต่างกันคือตาราง โดยเฉพาะอย่างยิ่งหากมีข้อมูลจำนวนมาก ลองดูวิธีการจัดวางสองวิธี ตารางการปรับตัว.

ก่อนอื่นเรามาดูกันว่าตารางมีลักษณะอย่างไร:

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

ง่ายมาก: ตารางถูกล้อมด้วย div ซึ่งตั้งค่าเป็นความกว้างสูงสุด 100% และโอเวอร์โฟลว์: อัตโนมัติ

หากโต๊ะยาว คุณสามารถกำหนดความสูงสูงสุดและแก้ไขส่วนหัวของตารางได้

ผลลัพธ์ตามตัวอย่างต่อไปนี้สามารถดูได้ในหน้านี้

หากคุณมีตารางบนไซต์ของคุณบ่อยครั้ง การใช้ปลั๊กอิน Footable ก็สมเหตุสมผล

ก่อนอื่นคุณต้องเชื่อมต่อปลั๊กอิน (ดาวน์โหลดบน GitHub หรือเชื่อมต่อจาก CDN) และเริ่มต้นด้วย:

$(function() ( $(".table").footable(); ));

ที่นี่เราต้องชี้แจงบางสิ่ง: ด้วยเหตุผลบางอย่างสคริปต์ไม่นับความกว้างของวิวพอร์ต แต่นับความกว้างของตาราง เพื่อแก้ไขปัญหานี้ คุณจะต้อง "ปรับปรุง" สคริปต์เล็กน้อย:

JQuery(function () ( jQuery(".table").footable(( คำนวณWidthOverride: function() ( return (width: jQuery(window).width()); ) )); ))

ในการเริ่มต้น เราจะระบุคลาสของตารางหรือเฉพาะแท็กตารางหากเราต้องการให้ตารางทั้งหมดบนไซต์ปรับเปลี่ยนได้

ทั้งหมดนี้หมายความว่าอย่างไร? บนแท็บเล็ต คอลัมน์ "RAM", "Diagonal", "PPI" และ "Battery" จะถูกซ่อนไว้ เมื่อลดขนาดเป็นโทรศัพท์ คอลัมน์ "ราคา" ก็จะรวมเข้าด้วยกัน

จุดตรวจสอบสามารถระบุได้ในการเริ่มต้น:

JQuery(function () ( jQuery(".table").footable(( CalculatorWidthOverride: function() ( return (width: jQuery(window).width()); ), จุดพัก: ( มือถือ: 0, แท็บเล็ต: 720, เดสก์ท็อป: 1024 ) ));

ซึ่งหมายความว่าในช่วง 0-720 กฎจะมีผลกับอุปกรณ์เคลื่อนที่ 720-1024 สำหรับแท็บเล็ต และมากกว่า 1,024 สำหรับเดสก์ท็อป ไม่มีอะไรหยุดคุณไม่ให้สร้างกฎเพิ่มเติมหากจำเป็น

คุณยังสามารถตรวจสอบให้แน่ใจว่าบางคอลัมน์ถูกขยายตามค่าเริ่มต้น เมื่อต้องการทำเช่นนี้ ให้ระบุแอตทริบิวต์ data data-expanded="true"

ความสามารถของปลั๊กอินไม่ได้สิ้นสุดเพียงแค่นั้น แต่ก็เพียงพอแล้วที่จะสร้างตารางแบบปรับเปลี่ยนได้ เราจะดูความเป็นไปได้อื่น ๆ ในครั้งต่อไป

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

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

มาจัดสไตล์กันทั้งหมด (ส่วนใหญ่เราต้องจัดสไตล์ table-wrap )

การตัดตาราง ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) @media screen และ (max-width: 600px) ( .table-wrap (ล้น-y: เลื่อน; ) )

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

ขั้นแรก เรามาเปลี่ยนมาร์กอัปกันก่อน:

เราให้แอตทริบิวต์ data-label แก่แต่ละคอลัมน์ ซึ่งจะเป็นประโยชน์สำหรับเราในอนาคต

ตั้งค่าสไตล์พื้นฐาน:

body ( การจัดตำแหน่งข้อความ: กึ่งกลาง; ช่องว่างด้านบน: 10%; ตระกูลแบบอักษร: sans-serif; ภาพพื้นหลัง: url ("bg.jpg"); ขนาดพื้นหลัง: ปก; ความสูง: 100vh; สี: #fff ; ) .table-wrap ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) table ( border: 1px solid #ccc; width: 100% ; ขอบ: 0; ช่องว่างภายใน: 0; เส้นขอบยุบ: ระยะห่างของตาราง: 0; เส้นขอบของตาราง: 1px solid #ddd; ช่องว่างภายใน: 5px; เส้นขอบขวา: 1px solid #ddd; ) ตาราง th ( color: #fff; สีพื้นหลัง: #444; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ขนาดตัวอักษร: 14px; ระยะห่างระหว่างตัวอักษร: 1px; )

ดูเหมือนตารางปกติโดยการย้ายไซต์ไป 320-420 พิกเซล เราจะเห็นการเลื่อนแนวนอนของทั้งไซต์ ไม่ใช่ประเด็น

จะแก้ไขปัญหานี้ได้อย่างไร? เพิ่มสไตล์:

@media screen และ (ความกว้างสูงสุด: 600px) ( table ( border: 0; ) table thead ( display: none; ) table tr ( Margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; ) ตาราง td ( จอแสดงผล: บล็อก; การจัดตำแหน่งข้อความ: ขวา; ขนาดตัวอักษร: 13px; ขอบล่าง: 1px จุด #ccc; ขอบด้านขวา: 1px ทึบโปร่งใส; ) ตาราง td: ลูกสุดท้าย ( ขอบล่าง: 0; ) ตาราง td:before ( เนื้อหา: attr(data-label); float: left; การแปลงข้อความ: ตัวพิมพ์ใหญ่; น้ำหนักแบบอักษร: ตัวหนา; ) )

ที่นี่เราทำให้แถวของตารางมีลักษณะเป็นบล็อก ลบชื่อคอลัมน์ และจัดข้อความของคอลัมน์ให้ชิดขวา ในทางกลับกัน การใช้ :before pseudo-class เราจะแนบแอตทริบิวต์ date ไว้ที่ขอบด้านซ้าย ปรากฎดังนี้:

นี่คือปากกาอีกอัน:

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

หน้าต่าง : อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 10.0+, ไฟร์ฟอกซ์ 1.5+, กูเกิลโครม, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1]

ลินุกซ์: Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [2]

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

HTML/XHTML. รหัส:

1

2

3

4

5

6

7

8

9

10

Table_data_1

Table_data_2

Table_data_3

Table_data_4

Table_data_5

Table_data_6

Table_data_7

Table_data_8

Table_data_9

Table_data_10

ตาราง (แสดง: บล็อก; ล้น-x: อัตโนมัติ;)

/* CSS เพิ่มเติม เพียงเพื่อให้ตัวอย่างปรากฏ: */

ตาราง (ยุบขอบ: ยุบ;)

ตาราง td,th (ช่องว่างภายใน: 10px; เส้นขอบ: 1px #000 ทึบ;)

บันทึก: คุณสมบัติซีเอสเอส display: block ทำให้ตารางใช้ความกว้างเท่าที่จำเป็นเพื่อรองรับข้อมูลโดยไม่บิดเบือนภาพ ไม่ต้องขยายความกว้างทั้งหมดของพื้นที่ว่างบนหน้าอีกต่อไป แม้ว่า width: 100% จะถูกเพิ่มลงในโค้ด CSS ตัวอย่าง:

Aliosque subditos และธีม

จัดตำแหน่งองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนให้อยู่ตรงกลางในแนวนอน ใช้ CSS- ตัวอย่าง: HTML/XHTML รหัส: ซีเอสเอส รหัส: .example (ตำแหน่ง: สัมพันธ์; ซ้าย: 0px; ด้านบน: 0px; ความสูง: 90px; ความกว้าง: 100%; ลอย: ซ้าย; ช่องว่างภายใน: 10px; เส้นขอบ: 1px #ccc solid; พื้นหลัง: #fafafa; -moz-box -ขนาด: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) .example img (ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ขวา: 0px; ระยะขอบ: 0px อัตโนมัติ; ความกว้าง: 68px;) ในตัวอย่าง องค์ประกอบ img ที่อยู่ในตำแหน่งที่แน่นอนจะอยู่ตรงกลาง แต่โดยทั่วไป วิธีนี้การจัดตำแหน่งกึ่งกลางแนวนอนทำงานร่วมกับองค์ประกอบอื่นๆ ที่อยู่ในตำแหน่งที่แน่นอน ทั้งแบบอินไลน์และบล็อก ความกว้างขององค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนอาจเป็นเปอร์เซ็นต์หรือหน่วยวัดอื่นๆ ก็ได้ คุณสมบัติ CSS ของคอนเทนเนอร์ (ในตัวอย่าง .example) ซึ่งภายในองค์ประกอบที่จัดกึ่งกลางอาจแตกต่างกันมาก การจัดตำแหน่งกึ่งกลางถูกสร้างขึ้นโดยใช้สไตล์ที่เกี่ยวข้องโดยตรงกับองค์ประกอบ: .example img (ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px ; ขวา: 0px; ระยะขอบ: 0px อัตโนมัติ;) [ 1 ] และใน Netscape 8.01+, Mozilla 1.5+ [ 2 ] และใน Netscape 8.01+, Mozilla 1.5+

ไม่มีคุณสมบัติ "float: Bottom" ใน CSS แต่สามารถทำได้ด้วยวิธีอื่นๆ หลายวิธี ตัวอย่าง: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua เริ่มต้นด้วยการใช้ขั้นต่ำ veniam, การออกกำลังกายแบบ nostrud, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ใน reprehenderit ใน voluptate velit esse cillum dolore eu fugiat nulla pariatur. ยกเว้น occaecat cupidatat ไม่ภูมิใจ, sunt ใน culpa qui officia deserunt mollit anim id est laborum. ลิงค์ 1 ลิงค์ 2 ลิงค์ 3 HTML / XHTML ด้านล่างแบบลอย รหัส: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua เริ่มต้นด้วยการใช้ขั้นต่ำ veniam, การออกกำลังกายแบบ nostrud, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ใน reprehenderit ใน voluptate velit esse cillum dolore eu fugiat nulla pariatur. ยกเว้น occaecat cupidatat ไม่ภูมิใจ, sunt ใน culpa qui officia deserunt mollit anim id est laborum.

ลิงค์ 1

ลิงค์ 2

ลิงค์ 3

ตารางข้อมูลจัดการสิ่งต่างๆ ได้ไม่ดีนัก การออกแบบที่ปรับเปลี่ยนได้- น่าเสียดายที่ขณะนี้มีอยู่จริง การออกแบบที่ตอบสนองคือสิ่งเดียวที่คุณต้องปรับแต่งการออกแบบเพื่อรองรับหน้าจอ ขนาดที่แตกต่างกัน- แล้วจะเกิดอะไรขึ้นเมื่อหน้าจอแคบกว่าความกว้างของตารางข้อมูลขั้นต่ำ? คุณสามารถย่อและดูทั้งตารางได้ แต่ขนาดตัวอักษรจะเล็กเกินกว่าจะอ่านได้ หรือคุณสามารถขยายจุดอ่านได้ แต่คุณจะต้องเลื่อนในแนวตั้งและแนวนอน (น่าเสียดาย) เพื่อดูตาราง ตารางข้อมูลสามารถค่อนข้างกว้างและแน่นอน ตารางสามารถปรับความกว้างได้ (น้ำหนัก=100%) แต่เนื้อหาของเซลล์อาจแคบลงจนไม่สามารถมองเห็นได้

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

หากต้องการสร้างตารางแบบโต้ตอบ ให้เพิ่มองค์ประกอบคอนเทนเนอร์ ล้น-x:อัตโนมัติรอบๆ

บันทึก. ใน OS X Lion (บน Mac) แถบเลื่อนจะถูกซ่อนไว้ตามค่าเริ่มต้นและจะปรากฏเฉพาะเมื่อมีการใช้งานเท่านั้น (แม้ว่าจะตั้งค่าเป็น "overflow:scroll" หรืออัตโนมัติก็ตาม)

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

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

เราได้สร้างตาราง HTML แบบง่ายๆ ตราบใดที่ตารางพอดีกับหน้าจอ ทุกอย่างก็โอเค เมื่อความกว้างของหน้าจอลดลง ตารางจะถูกตัดออกและเราจะไม่เห็นข้อมูลของมัน หรือมันจะเล็กมากและเราจะไม่เห็นอะไรเลยอีก

คุณอาจสังเกตเห็นว่าฉันวางตารางไว้ในแท็ก div และเห็นได้ชัดว่ามีเหตุผล แท็ก div เองไม่ได้ทำอะไรนอกจากเราจะจัดสไตล์มัน

ด้วยการตั้งค่าคุณสมบัติเพียงรายการเดียว ตารางจะปรับ แถบเลื่อนแนวนอนจะปรากฏขึ้นโดยอัตโนมัติเมื่อเนื้อหาภายในแท็ก div ไม่พอดีกับความกว้างของหน้าจอปัจจุบันตามแกน X อีกต่อไป

ดิวิชั่น (
ล้น-x: อัตโนมัติ;
)

มาจัดสไตล์แท็กตารางที่เหลือกันดีกว่า:

โต๊ะ (
ชายแดนยุบ: ยุบ; /* แสดงเพียงบรรทัดเดียว */
ระยะห่างขอบ: 0; /* ระยะห่างระหว่างเซลล์ */
ความกว้าง: 100%;
เส้นขอบ: 1px ทึบ #afb42b;
สี: #212121;
}

ธ, td (
การจัดแนวข้อความ: ซ้าย;
ช่องว่างภายใน: 8px;
}

การจัดรูปแบบของแท็ก tr (แถว) สมควรได้รับความคิดเห็นแยกต่างหาก ได้กลายเป็นบรรทัดฐานแล้วสำหรับแถวตารางที่จะมีลักษณะเป็นลายทาง (ม้าลาย) เมื่อต้องการทำเช่นนี้ ให้ใช้คลาสหลอก :nth-child โดยมีค่าอยู่ในวงเล็บคู่ ค่าคู่จะกำหนดคุณสมบัติให้กับองค์ประกอบคู่ทั้งหมด ในกรณีของเราคือสีพื้นหลัง ดังนั้นโต๊ะจะเป็นลายทาง