Có cách nào để thêm thanh cuộn Ngang vào bảng HTML không? Tôi thực sự cần nó để có thể cuộn theo cả chiều dọc và chiều ngang tùy thuộc vào cách bảng phát triển nhưng tôi không thể xuất hiện thanh cuộn.

Bạn đã thử thuộc overflowtính CSS chưa?

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

CẬP NHẬT
Như những người dùng khác đang chỉ ra, điều này là không đủ để thêm các thanh cuộn.
Vì vậy, xin vui lòng, xem và upvote ý kiến ​​và câu trả lời dưới đây.

Đầu tiên, tạo một display: blockbảng của bạn

Sau đó, đặt overflow-x:thành auto.

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

Đẹp và sạch sẽ. Không có định dạng thừa.

Dưới đây là các ví dụ liên quan nhiều hơn với chú thích bảng cuộn từ một trang trên trang web của tôi.

Bọc bảng trong DIV, đặt theo kiểu sau:

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

Sử dụng thuộc tính CSS " tràn " cho việc này.

Tóm tắt ngắn gọn:

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

ví dụ

table {
    display: block;
    overflow: scroll;
}

Tôi đã thành công tốt đẹp với giải pháp được đề xuất bởi @Serge Stroobandt, nhưng tôi gặp phải vấn đề @Shevy gặp phải với các ô sau đó không lấp đầy toàn bộ chiều rộng của bảng. Tôi đã có thể khắc phục điều này bằng cách thêm một số kiểu vào tbody.

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

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

Điều này làm việc cho tôi trong Firefox, Chrome và Safari trên Mac.

Tôi không thể có bất kỳ giải pháp nào ở trên để làm việc. Tuy nhiên, tôi tìm thấy một bản hack:

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>

Đây là một cải tiến của câu trả lời của Serge Stroobandt và hoạt động hoàn hảo. Nó giải quyết vấn đề của bảng không lấp đầy toàn bộ chiều rộng của trang nếu nó có ít cột hơn.

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

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

Tôi đã chạy vào cùng một vấn đề. Tôi đã phát hiện ra giải pháp sau, chỉ mới được thử nghiệm trong Chrome v31:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Tôi đã tìm ra câu trả lời này dựa trên giải pháp trước đó và đó là nhận xét và thêm một số điều chỉnh của riêng tôi. Điều này làm việc cho tôi trên bảng đáp ứng.

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;
}

'Chiều rộng hơn 100%' trên bàn thực sự khiến nó hoạt động với tôi.

.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>