จะแสดงตารางบนมือถือโดยใช้ Bootstrap ได้อย่างไร?

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

ฉันจะตั้งค่าความกว้างของตารางสำหรับมุมมองมือถือได้อย่างไร มีทางเลือกอื่นใดในการนำเสนอข้อมูลแบบตารางบนมุมมองมือถือโดยใช้ Bootstrap?

Bootstrap 3 แนะนำตารางตอบสนอง :

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 4 นั้นคล้ายกัน แต่สามารถควบคุมได้มากขึ้นผ่านคลาสใหม่ ๆ :

... ตอบสนองทุกวิวพอร์ต ... ด้วย.table-responsive. .table-responsive{-sm|-md|-lg|-xl}หรือเลือกเบรกพอยต์สูงสุดที่จะมีตารางการตอบสนองขึ้นไปโดยใช้

ให้เครดิตกับJason Bradleyสำหรับการให้ตัวอย่าง:

คุณอาจลองใช้วิธีใดวิธีหนึ่งเหล่านี้เนื่องจากตารางขนาดใหญ่ไม่เหมาะกับมือถือแม้ว่าจะใช้งานได้:

http://elvery.net/demo/responsive-tables/

ฉันเป็นส่วนหนึ่งของ 'No More Tables' แต่แน่นอนว่าขึ้นอยู่กับใบสมัครของคุณ

ตารางทั้งหมดที่อยู่ใน bootstrap จะยืดออกตามคอนเทนเนอร์ที่มีอยู่คุณสามารถวางตารางไว้ใน.spanองค์ประกอบเพื่อควบคุมขนาดได้ ดังนั้นคำถามนี้อาจช่วยคุณได้

เหตุใดตาราง Bootstrap ของ Twitter จึงมีความกว้าง 100% เสมอ

หลังจากค้นคว้าข้อมูลเป็นเวลาเกือบ 1 เดือนฉันพบโค้ดด้านล่างซึ่งทำงานได้อย่างสวยงามและสมบูรณ์ 100% บนเว็บไซต์ของฉัน หากต้องการตรวจสอบตัวอย่างการทำงานคุณสามารถตรวจสอบได้จากลิงค์ https://www.jobsedit.in/state-government-jobs/

รหัส CSS -----

@media only screen and (max-width: 500px)  {
    .resp table  { 
        display: block ; 
    }   
    .resp th  { 
        position: absolute;
        top: -9999px;
        left: -9999px;
        display:block ;
    }   
     .resp tr { 
    border: 1px solid #ccc;
    display:block;
    }   
    .resp td  { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        width:100%;
        background-color:White;
        text-indent: 50%; 
        text-align:left;
        padding-left: 0px;
        display:block;      
    }
    .resp  td:nth-child(1)  {
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        font-size:20px;
        text-indent: 0%;
        text-align:center;
}   
    .resp td:before  { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        text-indent: 0%;
        text-align:left;
        white-space: nowrap;
        background-color:White;
        font-weight:bold;
    }
    /*
    Label the data
    */
    .resp td:nth-of-type(2):before  { content: attr(data-th) }
    .resp td:nth-of-type(3):before  { content: attr(data-th) }
    .resp td:nth-of-type(4):before  { content: attr(data-th) }
    .resp td:nth-of-type(5):before  { content: attr(data-th) }
    .resp td:nth-of-type(6):before  { content: attr(data-th) }
    .resp td:nth-of-type(7):before  { content: attr(data-th) }
    .resp td:nth-of-type(8):before  { content: attr(data-th) }
    .resp td:nth-of-type(9):before  { content: attr(data-th) }
    .resp td:nth-of-type(10):before  { content: attr(data-th) }
}

รหัส HTML -

<table>
<tr>
<td data-th="Heading 1"></td>
<td data-th="Heading 2"></td>
<td data-th="Heading 3"></td>
<td data-th="Heading 4"></td>
<td data-th="Heading 5"></td>
</tr>
</table>