Apakah ada cara untuk menambahkan scrollbar Horizontal ke tabel HTML? Saya benar-benar membutuhkannya untuk dapat digulir baik secara vertikal dan horizontal tergantung pada bagaimana tabel tumbuh tetapi saya tidak bisa menampilkan bilah gulir.

Apakah Anda mencoba overflowproperti CSS ?

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

UPDATE
Seperti yang ditunjukkan pengguna lain, ini tidak cukup untuk menambahkan scrollbar.
Jadi tolong, lihat dan beri suara positif pada komentar dan jawaban di bawah ini.

Pertama, buatlah display: blocktabel Anda

lalu, setel overflow-x:ke auto.

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

Bagus dan bersih. Tidak ada pemformatan yang berlebihan.

Berikut adalah contoh yang lebih terlibat dengan teks tabel gulir dari halaman di situs web saya.

Bungkus tabel dalam DIV, atur dengan gaya berikut:

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

Gunakan atribut CSS " overflow " untuk ini.

Ringkasan singkat:

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

misalnya

table {
    display: block;
    overflow: scroll;
}

Ini adalah perbaikan dari jawaban Serge Stroobandt dan bekerja dengan sempurna. Ini memecahkan masalah tabel tidak mengisi seluruh lebar halaman jika memiliki lebih sedikit kolom.

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

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

Saya berhasil dengan baik dengan solusi yang diusulkan oleh @Serge Stroobandt, tetapi saya mengalami masalah yang dimiliki @Shevy dengan sel-sel yang kemudian tidak mengisi seluruh lebar tabel. Saya bisa memperbaiki ini dengan menambahkan beberapa gaya ke tbody.

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

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

Ini berfungsi untuk saya di Firefox, Chrome, dan Safari di Mac.

Saya tidak bisa mendapatkan solusi di atas untuk bekerja. Namun, saya menemukan peretasan:

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>

Saya mengalami masalah yang sama. Saya menemukan solusi berikut, yang hanya diuji di Chrome v31:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Saya menemukan jawaban ini berdasarkan solusi sebelumnya dan itu adalah komentar dan menambahkan beberapa penyesuaian saya sendiri. Ini berfungsi untuk saya di meja responsif.

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

'Lebar lebih dari 100%' di atas meja benar-benar membuatnya bekerja untuk saya.

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

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

Sisipkan tabel di dalam div, sehingga tabel akan berukuran penuh

HTML

<div class="scroll">
 <table>  </table>
</div>   

CSS

.scroll{
    overflow-x: auto;
    white-space: nowrap;
}

Dengan bootstrap

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

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