การจัดการตารางที่ตอบสนองใน Twitter Bootstrap

เมื่อความกว้างของตารางเกินความกว้างของสแปนเช่นหน้านี้: http://jsfiddle.net/rcHdC/

คุณจะเห็นเนื้อหาของตารางอยู่นอกไฟล์span.

อะไรคือวิธีที่ดีที่สุดในการตอบสนองกรณีนี้?

Bootstrap 3มีตารางที่ตอบสนองได้แล้ว ไชโย! :)

คุณสามารถตรวจสอบได้ที่นี่: https://getbootstrap.com/docs/3.3/css/#tables-responsive

เพิ่ม<div class="table-responsive">รอบโต๊ะของคุณและคุณควรจะไป:

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

เพื่อให้ใช้งานได้กับทุกเลย์เอาต์คุณสามารถทำได้:

.table-responsive
{
    overflow-x: auto;
}

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

มีหลายสิ่งที่คุณสามารถทำได้เมื่อจัดการกับตารางตอบสนอง

โดยส่วนตัวแล้วฉันชอบแนวทางนี้ของ Chris Coyier:

• http://css-tricks.com/responsive-data-tables/

คุณสามารถค้นหาทางเลือกอื่น ๆ ได้ที่นี่:

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

หากคุณสามารถใช้ประโยชน์จาก Bootstrap และรับบางสิ่งได้อย่างรวดเร็วคุณสามารถใช้ชื่อคลาส ".hidden-phone" และ ".hidden-tablet" เพื่อซ่อนแถวบางแถว แต่วิธีนี้อาจดีที่สุดในหลาย ๆ กรณี ข้อมูลเพิ่มเติม (ดู "คลาสยูทิลิตี้ที่ตอบสนอง"):

• http://twitter.github.io/bootstrap/scaffolding.html#responsive

หากคุณใช้ Bootstrap 3 และ Less คุณสามารถใช้ตารางตอบสนองกับความละเอียดทั้งหมดได้โดยการอัปเดตไฟล์:

tables.less

หรือเขียนทับส่วนนี้:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

ด้วย:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

สังเกตว่าฉันเปลี่ยนค่า line @ screen-XX แรกอย่างไร

ฉันรู้ว่าการทำให้ตารางทั้งหมดตอบสนองอาจฟังดูไม่ดีนัก แต่ฉันพบว่ามีประโยชน์อย่างยิ่งที่จะเปิดใช้งาน LG บนโต๊ะขนาดใหญ่ (มีคอลัมน์จำนวนมาก)

หวังว่ามันจะช่วยใครบางคน