วิธีสร้างตารางตอบสนองด้วยการเลื่อนแนวนอนใน Divi

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

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

มาเริ่มกันเลย.

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของตารางตอบสนองพร้อมการเลื่อนแนวนอนที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างตารางตอบสนองด้วย Scroll แนวนอน

ส่วนที่ 1: การสร้างคอลัมน์ตาราง

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

อัปเดตการตั้งค่าส่วน

ก่อนเพิ่มแถว ให้เปิดการตั้งค่าส่วนของส่วนปกติที่เป็นค่าเริ่มต้น และเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

display:flex;
overflow-y:scroll !important;

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

เพิ่มแถว

เมื่อ CSS ของส่วนอยู่ในตำแหน่งแล้ว ให้สร้างแถวหนึ่งคอลัมน์ภายในส่วนนั้น

การตั้งค่าแถว

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%

เพื่อให้แน่ใจว่าคอลัมน์ตารางของเราไม่มีระยะขอบพิเศษระหว่างโมดูลข้อความที่เราจะเพิ่มสำหรับรายการตารางของเรา

จากนั้นกำหนดเส้นขอบด้านขวาให้แถวดังนี้:

• ความกว้างของขอบขวา: 1px
• สีขอบขวา: #cccccc

จากนั้นอัปเดตการเติม:

• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ภายใต้แท็บขั้นสูง กำหนดคลาส CSS แบบกำหนดเองให้กับแถวดังนี้:

• CSS คลาส: et-scroll-table-column

เราต้องการสิ่งนี้สำหรับรหัสที่กำหนดเองในภายหลัง

การสร้างรายการตารางด้วยโมดูลข้อความ

ในการสร้างรายการตารางภายในแต่ละแถว (หรือคอลัมน์ตาราง) เราจะใช้โมดูลข้อความ

เพิ่มโมดูลข้อความ

เนื้อหาข้อความ

ถัดไป เพิ่มข้อความ "รายการตาราง" ลงในเนื้อหาเนื้อหาของโมดูลข้อความ

การออกแบบข้อความ

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งข้อความ: center
• ส่วนสูง: 80px

• ความกว้างของขอบขวา: 1px
• สีขอบล่าง: #cccccc

เส้นขอบนี้จะตรงกับเส้นขอบด้านขวาของแถว

ข้อความ CSS

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

display:flex;
align-items:center;
justify-content: center;

โมดูลข้อความซ้ำสำหรับรายการตารางเพิ่มเติม

เมื่อสร้างรายการตารางแรกของเราแล้ว ให้ทำซ้ำโมดูลข้อความ (หลาย ๆ ครั้งตามต้องการ) เพื่อสร้างรายการตารางเพิ่มเติมภายในแถว

การสร้างส่วนหัวของคอลัมน์ตาราง

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

จากนั้นอัปเดตสีพื้นหลัง

• ความเป็นมา: #333333

และอัพเดทการออกแบบข้อความดังนี้

• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #ffffff

ทำซ้ำแถวสำหรับคอลัมน์ตารางเพิ่มเติม

เมื่อแถวแรกเสร็จสมบูรณ์แล้ว เราสามารถทำซ้ำแถวนั้นเพื่อสร้างคอลัมน์ตารางได้มากเท่าที่จำเป็นสำหรับตาราง สำหรับการออกแบบนี้ เราจะทำซ้ำแถวแปดครั้งเพื่อสร้างทั้งหมดเก้าแถว

ส่วนที่ 2: การออกแบบคอลัมน์ Sticky Table ด้วยส่วนหัวแนวตั้ง

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

อัปเดตพื้นหลังของแถว

ในการดำเนินการนี้ ให้เปิดการตั้งค่าสำหรับแถวแรกและอัปเดตสีพื้นหลัง:

• สีพื้นหลัง: #333333

อัปเดตโมดูลข้อความ

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

จากนั้นเลือกโมดูลข้อความทั้งหมดหลายรายการภายในแถว (กด ctrl (หรือ cmd) ค้างไว้แล้วคลิกแต่ละโมดูล) และอัปเดตเนื้อหาเนื้อหาด้วยข้อความ "หัวเรื่อง"

เพิ่มโลโก้

เนื่องจากเราไม่ต้องการส่วนหัวที่ด้านบนสุดในคอลัมน์นี้ เราจะเพิ่มโลโก้ลงในตาราง

เปิดการตั้งค่าสำหรับโมดูลข้อความด้านบนสุดในแถวแรก

แล้วลบเนื้อความ

จากนั้นเพิ่มโลโก้ (ตรวจสอบให้แน่ใจว่ามีขนาดประมาณ 40px x 40px) เป็นภาพพื้นหลัง ตรวจสอบให้แน่ใจว่าได้ตั้งค่าขนาดภาพพื้นหลังเป็น "ขนาดจริง"

ทำให้แถวหัวเรื่องแนวตั้งติดหนึบ

ในการทำให้แถวติดหนึบ ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(คุณสามารถละเว้นข้อผิดพลาดของรหัสที่จะแสดงโดยใช้คุณสมบัติติดหนึบ)

เพื่อให้แน่ใจว่าแถวติดหนึบจะมองเห็นได้เหนือแถวอื่นๆ ให้อัปเดตดัชนี Z:

• ดัชนี Z: 13

ส่วนที่ 3: การอัปเดตส่วนของตาราง

เมื่อองค์ประกอบตารางพร้อมแล้ว เราสามารถอัปเดตส่วน (คอนเทนเนอร์ตาราง) ด้วยขนาดที่เฉพาะเจาะจงและโอเวอร์โฟลว์ได้

เปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลัง:

• สีพื้นหลัง: #ffeaef

จากนั้นอัปเดตขนาดและระยะห่างดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 900px
• ขอบ: 10vh ด้านบน
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

จากนั้นเพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: et-scroll-table

และอัปเดตโอเวอร์โฟลว์:

• ล้นแนวนอน: เลื่อน
• ล้นแนวตั้ง: ซ่อน

(หมายเหตุ: เราได้เพิ่ม “overflow:scroll” ลงในส่วนเป็น CSS ที่กำหนดเองแล้ว เพื่อให้ฟังก์ชันการเลื่อนมีผลกับตัวสร้างภาพด้วย)

ส่วนที่ 4: การเพิ่มปุ่มเลื่อนแนวนอน

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

เพิ่มมาตรา

เมื่อต้องการทำสิ่งนี้ ให้สร้างส่วนปกติใหม่

เปิดการตั้งค่าส่วนและนำช่องว่างภายในเริ่มต้นออก:

• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

เพิ่มแถว

ให้ส่วนเป็นแถวหนึ่งคอลัมน์

และอัปเดตการตั้งค่าแถวดังนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 900px
• ช่องว่างภายใน: บน 10px ล่าง 10px ขวา 10px

สร้างปุ่มเลื่อนซ้าย

ในการสร้างปุ่มเลื่อนด้านซ้าย ให้เพิ่มโมดูลการนำเสนอลงในคอลัมน์/แถว

นำชื่อเริ่มต้นและเนื้อหาเนื้อหาออก และเพิ่มไอคอนลูกศรซ้าย

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ไอคอนสี: #333333
• การจัดตำแหน่งรูปภาพ/ไอคอน: center
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 40px
• ความกว้างของเนื้อหา: 100%
• ความกว้าง: 50px

จากนั้นให้ประกาศคลาส CSS:

• CSS คลาส: et-scroll-left

นี่เป็นสิ่งจำเป็นในการเพิ่มฟังก์ชันการเลื่อนเมื่อคลิกลงในคำประกาศ/ปุ่มด้วยรหัสของเราในภายหลัง

สร้างปุ่มเลื่อนขวา

ในการสร้างปุ่มเลื่อนด้านขวา ให้ทำซ้ำข้อความแจ้ง และอัปเดตไอคอนด้วยลูกศรขวา

จากนั้นอัปเดตคลาส CSS:

• CSS คลาส: et-scroll-right

หากต้องการจัดแนวปุ่มในแนวนอน ให้เปิดการตั้งค่าสำหรับคอลัมน์ และเพิ่ม CSS แบบกำหนดเองต่อไปนี้:

display:flex;
justify-content:flex-end;

ส่วนที่ 5: การเพิ่มรหัสที่กำหนดเอง

สำหรับส่วนสุดท้ายของบทช่วยสอนนี้ เราจำเป็นต้องเพิ่ม CSS ที่จำเป็นในการตั้งค่าความกว้างขั้นต่ำสำหรับแถว (ซึ่งจริงๆ แล้วคือคอลัมน์ตารางของเรา) และโค้ด JS ที่จำเป็นในการเพิ่มฟังก์ชันการเลื่อนให้กับปุ่ม

หากต้องการเพิ่มโค้ด ให้เพิ่มโมดูลโค้ดใต้ข้อความแจ้งที่สอง

ในกล่องโค้ด ให้วาง CSS ต่อไปนี้เพื่อให้แน่ใจว่าได้ใส่โค้ดลงในแท็ก รูปแบบที่ จำเป็น

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

ภายใต้โค้ด CSS ให้วาง jQuery ต่อไปนี้เพื่อให้แน่ใจว่าได้ห่อโค้ดด้วยแท็ก สคริปต์ที่ จำเป็น

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

กำลังอัปเดตความกว้างของคอลัมน์

หากคุณต้องการอัปเดตความกว้างต่ำสุดของแต่ละคอลัมน์ในตาราง คุณสามารถเปลี่ยนค่าของความกว้างต่ำสุดใน CSS

กำลังอัปเดตจำนวนคอลัมน์บน Scroll

ขณะนี้ การคลิกปุ่มจะเลื่อนในแนวนอน (ซ้ายหรือขวา) เป็นระยะทางเท่ากับความกว้างของคอลัมน์สองคอลัมน์ หากต้องการเปลี่ยนจำนวนคอลัมน์ในการเลื่อน ให้อัปเดตตัวเลขขวาสุด (ปัจจุบันคือหมายเลข 2) ในค่าของตัวแปร scrollByColumnNumber

การเพิ่มสีคอลัมน์สลับ

ตอนนี้สีพื้นหลังของส่วนกำลังกำหนดสีของคอลัมน์ (หรือแถว) ของตารางทั้งหมด หากคุณต้องการสร้างสีสลับกันสำหรับคอลัมน์เหล่านั้น ให้ใช้การเลือกหลายรายการเพื่อเลือกแถวอื่นๆ และเพิ่มสีพื้นหลังสีขาวให้กับแต่ละคอลัมน์

ผลสุดท้าย

ตอนนี้ตรวจสอบผลลัพธ์สุดท้าย!

นี่คือการออกแบบขั้นสุดท้ายของตารางบนเดสก์ท็อป

และนี่คือฟังก์ชันการเลื่อนแนวนอนบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

ความคิดสุดท้าย

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้างตารางตอบสนองใน WordPress โปรดดูที่โพสต์ของเราเกี่ยวกับวิธีสร้างตารางที่ตอบสนองใน WordPress

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!