¿Hay alguna manera de agregar una barra de desplazamiento horizontal a una tabla HTML? De hecho, necesito que se pueda desplazar tanto vertical como horizontalmente según cómo crezca la tabla, pero no puedo hacer que aparezca ninguna barra de desplazamiento.

¿Intentaste la overflowpropiedad CSS ?

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

ACTUALIZACIÓN
Como señalan otros usuarios, esto no es suficiente para agregar las barras de desplazamiento.
Entonces, por favor, vea y vote los comentarios y respuestas a continuación.

Primero, haz una display: blockde tu mesa

luego, establecer overflow-x:en auto.

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

Bonito y limpio. Sin formato superfluo.

Aquí hay ejemplos más involucrados con subtítulos de tabla de desplazamiento desde una página en mi sitio web.

Envuelva la mesa en un DIV, con el siguiente estilo:

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

Use el atributo CSS " desbordamiento " para esto.

Breve resumen:

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

p.ej

table {
    display: block;
    overflow: scroll;
}

Tuve un buen éxito con la solución propuesta por @Serge Stroobandt, pero encontré el problema que @Shevy tenía con las celdas que no llenaban todo el ancho de la tabla. Pude solucionar esto agregando algunos estilos al tbody.

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

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

Esto funcionó para mí en Firefox, Chrome y Safari en Mac.

No pude conseguir que ninguna de las soluciones anteriores funcionara. Sin embargo, encontré un truco:

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>

Esta es una mejora de la respuesta de Serge Stroobandt y funciona perfectamente. Resuelve el problema de que la tabla no llene todo el ancho de la página si tiene menos columnas.

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

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

Me encontraba con el mismo problema. Descubrí la siguiente solución, que solo se ha probado en Chrome v31:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Descubrí esta respuesta basada en la solución anterior y es un comentario y agregué algunos ajustes propios. Esto funciona para mí en la tabla receptiva.

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

El 'más del 100% de ancho' en la mesa realmente lo hizo funcionar para mí.

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