¿Cómo hacer una tabla html responsive?

Para hacer una tabla HTML responsive, puedes utilizar las siguientes técnicas:

Usa la etiqueta para definir la cabecera de la tabla y la etiqueta para el cuerpo de la tabla. De esta forma, puedes definir diferentes estilos para la cabecera y el cuerpo de la tabla.

Usa la propiedad overflow-x: auto; en el contenedor de la tabla. Esto permitirá que la tabla sea desplazable horizontalmente en dispositivos móviles y evita que se desborde el ancho de pantalla.

Usa la propiedad white-space: nowrap; en las celdas de la tabla para evitar que el contenido se divida en varias líneas y se desborde la tabla.

Usa la propiedad max-width en las celdas de la tabla para limitar su ancho máximo. De esta forma, las celdas no se expandirán más allá de un cierto ancho y evitarás que la tabla se desborde.

Usa la propiedad text-overflow: ellipsis; en las celdas de la tabla para que el contenido que no se ajusta al ancho de la celda se muestre como puntos suspensivos.

Aquí tienes un ejemplo de cómo se puede hacer una tabla HTML responsive:

<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Edad</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Smith</td>
        <td>40</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
.table-responsive {
  overflow-x: auto;
}
.table-responsive td {
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

En este ejemplo, la clase table-responsive se utiliza como un contenedor para la tabla. La propiedad overflow-x: auto; se aplica a este contenedor para permitir el desplazamiento horizontal de la tabla en dispositivos móviles. La propiedad max-width se aplica a las celdas de la tabla para limitar su ancho máximo. La propiedad white-space: nowrap; se utiliza para evitar que el contenido de las celdas se divida en varias líneas, y la propiedad text-overflow: ellipsis; se utiliza para mostrar puntos suspensivos en el contenido que no se ajusta al ancho de la celda.