การออกแบบตารางแบบโต้ตอบ

Oracle Content Management มี CSS ตัวอย่างของตารางแบบโต้ตอบอยู่ภายในองค์ประกอบของย่อหน้า ซึ่งใช้งานการเรียงซ้อนข้อมูลแถวเมื่อปรากฏบนอุปกรณ์เคลื่อนที่

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

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

<thead>
    <tr>
        <th scope="col">ACCOUNT</th>
        <th scope="col">DUE DATE</th>
        <th scope="col">AMOUNT</th>
        <th scope="col">MINIMUM</th>
        <th scope="col">PERIOD</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td data-label="ACCOUNT">Visa</td>
        <td data-label="DUE DATE">04/16/2020</td>
        <td data-label="AMOUNT">$3,090</td>
        <td data-label="PERIOD">03/09/2020 - 04/08/2020</td>
    </tr>

เมื่อมีแอททริบิวดังกล่าวอยู่ในแต่ละเซลล์แล้ว TD ต่างๆ จะกองซ้อนทับที่ด้านบนสุดของกันและกัน เมื่อคุณใช้กฎ CSS ทางด้านล่าง

  .scs-paragraph:not(.scs-paragraph-edit) table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

โปรดทราบว่ากฎของสื่อที่ด้านล่างจะสืบค้นขนาดหน้าจอ และจะมีผลเมื่อหน้าจอมีขนาดเล็กกว่า 767 พิกเซลเท่านั้น

@media screen and (max-width: 767px) {

ผู้สามารถสามารถค้นหาตัวอย่างรหัสสำหรับการใช้ css เพื่อให้ตารางที่แทรกสามารถทำงานตอบสนองได้ในไฟล์ design.css ดีฟอลต์ของ StarterTheme ที่ระบุให้ หากกำลังการสร้างไซต์จาก StarterTheme ตารางต่างๆ ที่แทรกลงในสล็อตย่อหน้าจะตอบสนองตามค่าดีฟอลต์ ในการแทรกตาราง ให้ทำดังนี้

1. ใน Oracle Content Management ให้เปิดไซต์และท็อกเกิลไปที่โหมด แก้ไข
2. สร้างการอัปเดตใหม่ หรือเลือกการอัปเดตที่มีอยู่เพื่อแก้ไข
3. ลากองค์ประกอบของย่อหน้าใหม่ไว้บนเพจ และคลิกตำแหน่งที่คุณต้องการแทรกตาราง หรือคลิกที่ย่อหน้าที่มีอยู่ที่คุณต้องการแทรกตาราง
4. บนแถวเครื่องมือข้อความที่มีรูปแบบ คลิก และตั้งค่าคุณสมบัติของตาราง ตรวจสอบให้แน่ใจว่าได้เลือกแถวแถวแรกสุดเป็นส่วนหัว และปรับปรุงความกว้างของตารางเพื่อให้ทำงานได้อย่างมีประสิทธิภาพบนหน้าจอที่มีขนาดเล็กที่สุดที่ต้องการใช้ ตัวอย่างเช่น หากคุณต้องการดูไซต์บนโทรศัพท์ ความกว้างดีฟอลต์ที่ 767 พิกเซลอาจกว้างเกินไปสำหรับการแสดงผลเต็มรูปแบบบนหน้าจอโทรศัพท์ แม้แต่ในกรณีที่เป็นลักษณะการกองซ้อน คุณอาจต้องตั้งค่าความกว้างของตารางเป็นขนาดที่เล็กลง เช่น 300 พิกเซล หรือตั้งค่าความกว้างเป็น 100%

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

หากคุณต้องการใช้ตารางแบบโต้ตอบเมื่อสร้างไซต์จากธีมที่แตกต่างกัน คุณจำเป็นต้องคัดลอกรหัสจาก StarterTheme design.css ไปยังไฟล์ design.css ของธีมที่คุณกำลังใช้อยู่

1. ในการคัดลอกรหัสจาก StarterTheme design.css คลิก ผู้พัฒนา ในการนาวิเกตด้านข้างของ Oracle Content Management
2. คลิก ดูธีมทั้งหมด
3. เลือก StarterTheme และคลิก เปิด
4. คลิกการออกแบบเพื่อเปิดโฟลเดอร์ แล้วคลิก ดีฟอลต์
5. เลือกไฟล์ design.css จาก StarterTheme แล้วคลิก ดาวน์โหลด
6. เปิดไฟล์ในโปรแกรมแก้ไขข้อความ และค้นหาส่วนของไฟล์ที่ขึ้นต้นด้วยความเห็น An example CSS of how to render a table responsively
7. เลือกและคัดลอกรหัสจนถึงความเห็นถัดไป

   /**
    * An example CSS of how to render a table responsively.
    * It enables stacking of row data on mobile devices.
    * Only do this for view mode (not for edit mode).
    *
    * On each cell rendered, it adds a user-defined attribute 
    * 'data-label' with value matching the column header text.
    */
    @media screen and (max-width: 767px) {
     .scs-paragraph:not(.scs-paragraph-edit) table {
       border: 0;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table caption {
       font-size: 1.3em;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table thead {
       border: none;
       clip: rect(0 0 0 0);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table tr {
       border-bottom: 3px solid #ddd;
       display: block;
       margin-bottom: .625em;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td {
       border-bottom: 1px solid #ddd;
       display: block;
       text-align: right;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td::before {
       content: attr(data-label);
       float: left;
       font-weight: bold;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td:last-child {
       border-bottom: 0;
     }
   }

8. ทำขั้นตอนต่างๆ ซ้ำเพื่อดาวน์โหลดไฟล์ design.css ของเทมเพลทที่คุณต้องการแก้ไข เปิดเทมเพลท และวางรหัสที่คัดลอกลงในไฟล์
9. บันทึกการเปลี่ยนแปลงและอัปโหลดไฟล์ design.css ที่แก้ไขเป็นการปรับแก้ใหม่ในธีมที่คุณกำลังแก้ไข