มีวิธีเพิ่มแถบเลื่อนแนวนอนในตาราง HTML หรือไม่? จริง ๆ แล้วฉันต้องการให้เลื่อนได้ทั้งแนวตั้งและแนวนอนขึ้นอยู่กับการเติบโตของตาราง แต่ฉันไม่สามารถเลื่อนแถบเลื่อนได้

คุณลองoverflowคุณสมบัติCSS หรือไม่

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

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

ก่อนอื่นทำdisplay: blockตารางของคุณ

แล้วตั้งไปoverflow-x:auto

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

สวยและสะอาด ไม่มีการจัดรูปแบบฟุ่มเฟือย

ต่อไปนี้เป็นตัวอย่างที่เกี่ยวข้องกับการเพิ่มคำอธิบายตารางจากหน้าเว็บในเว็บไซต์ของฉัน

ล้อมรอบตารางใน DIV ตั้งค่าด้วยรูปแบบต่อไปนี้:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

ใช้แอตทริบิวต์ CSS " overflow " สำหรับสิ่งนี้

สรุปสั้น ๆ:

overflow: visible|hidden|scroll|auto|initial|inherit;

เช่น

table {
    display: block;
    overflow: scroll;
}

ฉันประสบความสำเร็จในการแก้ปัญหาที่เสนอโดย @Serge Stroobandt แต่ฉันพบปัญหาที่ @Shevy มีกับเซลล์จากนั้นไม่เติมเต็มความกว้างของตาราง tbodyผมสามารถที่จะแก้ไขปัญหานี้โดยการเพิ่มรูปแบบบางอย่างเพื่อ

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

สิ่งนี้ใช้ได้กับฉันใน Firefox, Chrome และ Safari บน Mac

ฉันไม่สามารถใช้วิธีแก้ไขปัญหาใด ๆ ข้างต้นได้ อย่างไรก็ตามฉันพบแฮ็ค:

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}

<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

นี่คือการปรับปรุงคำตอบของSerge Stroobandtและทำงานได้อย่างสมบูรณ์แบบ มันแก้ปัญหาของตารางที่ไม่เติมเต็มความกว้างของหน้าถ้ามันมีคอลัมน์น้อย

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>

ฉันพบปัญหาเดียวกัน ฉันค้นพบวิธีแก้ไขปัญหาต่อไปนี้ซึ่งได้รับการทดสอบใน Chrome v31 เท่านั้น:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

ฉันหาคำตอบนี้จากคำตอบก่อนหน้านี้และมันเป็นความคิดเห็นและเพิ่มการปรับเปลี่ยนของฉันเอง สิ่งนี้ใช้ได้กับฉันบนตารางการตอบสนอง

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}

'ความกว้างมากกว่า 100%' บนโต๊ะทำให้ฉันทำงานได้จริง

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>