Bootstrap 4 ตารางตอบสนองจะไม่ใช้ความกว้าง 100%

Question 1

ฉันกำลังสร้างเว็บแอปโดยใช้ Bootstrap 4 และพบปัญหาแปลก ๆ ฉันต้องการใช้คลาสที่ตอบสนองต่อตารางของ Bootstrap เพื่อให้สามารถเลื่อนตารางในแนวนอนบนอุปกรณ์มือถือได้ บนอุปกรณ์เดสก์ท็อปตารางควรใช้พื้นที่ 100% ของความกว้างของ DIV

ทันทีที่ฉันใช้คลาส. table-responsive กับตารางของฉันตารางจะหดตัวในแนวนอนและไม่ใช้ความกว้าง 100% อีกต่อไป ความคิดใด ๆ ?

นี่คือมาร์กอัปของฉัน:

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

ถ้าฉันใช้ความกว้าง 100% กับคลาส. table-responsive มันจะทำให้ตารางนั้นกว้าง 100% แต่องค์ประกอบลูก (TBODY, TR ฯลฯ ) ยังคงแคบอยู่

Question 2

ต่อไปนี้จะไม่ทำงาน มันทำให้เกิดปัญหาอื่น ตอนนี้จะมีความกว้าง 100% แต่จะไม่ตอบสนองบนอุปกรณ์ขนาดเล็ก:

.table-responsive {
    display: table;
}

display: table;คำตอบทั้งหมดเหล่านี้แนะนำปัญหาอื่นโดยการแนะนำ ทางออกเดียวในตอนนี้คือใช้เป็นกระดาษห่อหุ้ม:

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

Question 3

วิธีนี้ใช้ได้ผลสำหรับฉัน:

เพียงเพิ่มคลาสอื่นในองค์ประกอบตารางของคุณ: w-100 d-block d-md-table

ดังนั้นมันจะเป็น: <table class="table table-responsive w-100 d-block d-md-table">

สำหรับ bootstrap 4 w-100ตั้งค่าความกว้างเป็น 100% d-block(display: block) และd-md-table(display: table on min-width: 576px)

Bootstrap 4 แสดงเอกสาร

Question 4

หากคุณใช้ V4.1 และตามเอกสารอย่ากำหนด. table-responsive ให้กับตารางโดยตรง ตารางควรเป็น. table และถ้าคุณต้องการให้เลื่อนได้ในแนวนอน (ตอบสนอง) ให้เพิ่มเข้าไปในคอนเทนเนอร์. table-responsive ( <div>ตัวอย่างเช่น)

ตารางที่ตอบสนองช่วยให้สามารถเลื่อนตารางในแนวนอนได้อย่างง่ายดาย ทำให้ตารางตอบสนองต่อวิวพอร์ตทั้งหมดโดยการรวม. table ด้วย. table -responsive

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

การทำเช่นนั้นไม่จำเป็นต้องใช้ css เพิ่มเติม

ในรหัสของ OP สามารถใช้ .table-responsive ร่วมกับ. col-md-12 ที่ด้านนอกได้

Question 5

ด้วยเหตุผลบางประการตารางตอบสนองโดยเฉพาะจึงไม่ทำงานเท่าที่ควร คุณสามารถแก้ไขได้โดยการกำจัดdisplay:block;

.table-responsive {
    display: table;
}

ฉันสามารถยื่นรายงานข้อบกพร่อง

แก้ไข:

มันเป็นจุดบกพร่องที่มีอยู่

Question 6

คำตอบเหล่านี้ไม่ได้ผล (วันนี้ 9 ธ.ค. 2018) ความละเอียดที่ถูกต้องคือการเพิ่ม. table-responsive-sm ลงในตารางของคุณ:

<table class='table table-responsive-sm'>
[Your table]
</table>

สิ่งนี้ใช้ด้านการตอบสนองเฉพาะกับมุมมอง SM (มือถือ) ดังนั้นในมุมมองมือถือคุณจะได้รับการเลื่อนตามที่ต้องการและในมุมมองที่ใหญ่ขึ้นตารางจะไม่ตอบสนองและแสดงความกว้างเต็มตามที่ต้องการ

เอกสาร: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

Question 7

โซลูชันที่สอดคล้องกับ v4 ของเฟรมเวิร์กคือการตั้งค่าเบรกพอยต์ที่เหมาะสม แทนที่จะใช้. table-responsive คุณควรจะสามารถใช้. table-responsive-sm (เพื่อตอบสนองบนอุปกรณ์ขนาดเล็กเท่านั้น)

คุณสามารถใช้ปลายทางที่มีอยู่: table-responsive {-sm | -md | -lg | -xl}

Question 8

สร้างตารางที่ตอบสนองโดยการรวม. table ด้วย. table-responsive {-sm | -md | -lg | -xl} ทำให้ตารางเลื่อนในแนวนอนที่เบรกพอยต์ความกว้างสูงสุดแต่ละจุดสูงสุด (แต่ไม่รวม) 576px, 768px, 992px และ 1120px ตามลำดับ

เพียงตัดตารางด้วย. table-responsive {-sm | -md | -lg | -xl}

ตัวอย่างเช่น

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

bootstrap 4 ตาราง

Question 9

นั่นเป็นเพราะ.table-responsiveคลาสเพิ่มคุณสมบัติdisplay: blockให้กับองค์ประกอบของคุณซึ่งเปลี่ยนแปลงไปจากก่อนหน้านี้display: tableให้กับองค์ประกอบของคุณซึ่งเปลี่ยนแปลงจากก่อนหน้านี้

แทนที่คุณสมบัตินี้กลับไปdisplay: tableในสไตล์ชีตของคุณเอง

.table-responsive {
    display: table;
}

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

Question 10

มันเกิดจากtable-responsiveคลาสที่ให้คุณสมบัติของตารางdisplay:blockซึ่งเป็นเรื่องแปลกเพราะสิ่งนี้เขียนทับtableคลาสดั้งเดิมdisplay:tableและเป็นสาเหตุที่ตารางหดตัวเมื่อคุณเพิ่มtable-responsiveตารางเมื่อคุณเพิ่ม

ส่วนใหญ่จะลง bootstrap 4 ยังคงอยู่ใน dev คุณปลอดภัยที่จะเขียนทับคุณสมบัตินี้ด้วยคลาสของคุณเองที่กำหนดdisplay:tableและจะไม่ส่งผลต่อการตอบสนองของตาราง

เช่น

.table-responsive-fix{
   display:table;
}

Question 11

เมื่อพิจารณาถึงคำตอบอื่น ๆ ฉันจะทำสิ่งนี้ขอบคุณ!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

Question 12

ฉันพบว่าการใช้คลาสที่ตอบสนองต่อตารางที่แนะนำใน Wrapper ยังคงทำให้ตารางที่ตอบสนองลดขนาดลงในแนวนอน:

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

ทางออกสำหรับฉันคือสร้างเบรกพอยต์และคลาสของสื่อต่อไปนี้เพื่อป้องกัน:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

จากนั้นฉันสามารถเพิ่มคลาสที่เหมาะสมลงในองค์ประกอบตารางของฉัน ตัวอย่างเช่น:

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

ที่นี่ wrapper ตั้งค่าความกว้างเป็น 100% สำหรับขนาดใหญ่และมากกว่าต่อ Bootstrap เมื่อใช้คลาส table-lg กับองค์ประกอบตารางความกว้างของตารางจะถูกตั้งค่าเป็น 100% สำหรับขนาดใหญ่และมากกว่า แต่กำหนดเป็น 992px สำหรับขนาดกลางและขนาดเล็ก คลาส table-xs, table-sm, table-md และ table-xl ทำงานในลักษณะเดียวกัน

Question 13

สำหรับ Bootstrap 4.x ให้ใช้ยูทิลิตี้การแสดงผล:

w-100 d-print-block d-print-table

การใช้งาน :

<table class="table w-100 d-print-block d-print-table">

Question 14

ดูเหมือนว่าองค์ประกอบ "sr-only" และรูปแบบภายในตารางจะเป็นสาเหตุของจุดบกพร่องนี้ อย่างน้อยฉันก็มีปัญหาเดียวกันและหลังจากหลายเดือนที่เราเอาหัวชนกำแพงนั่นคือสิ่งที่เราระบุว่าสาเหตุคือแม้ว่าฉันจะยังไม่เข้าใจว่าทำไม การเพิ่มสไตล์left:0"sr-only" ได้รับการแก้ไขแล้ว