tabla responsive

LordJhony · #1 (**permalink**) 27/06/2017, 11:21

Hola...
Tengo la siguiente tabla

Código HTML:

Ver original<table class="table" id="tblent">
    <tr>
      <td colspan="4"><h2>Entregables</h2></td>
    </tr>
    <tr>
      <td class="ent"><img src="imagen1.jpg" class="imgentregable"><h3>Informe 1</h3></td>
      <td class="ent"><img src="imagen2.jpg" class="imgentregable"><h3>Informe 2</h3></td>
      <td class="ent"><img src="imagen3.jpg" class="imgentregable"><h3>Informe 3</h3></td>
      <td class="ent"><img src="imagen4.jpg" class="imgentregable"><h3>Informe 4</h3></td>
    </tr>
    <tr>
      <td class="tdent">Informacion del Informe 1</td>
      <td class="tdent">Informacion del Informe 2</td>
      <td class="tdent">Informacion del Informe 3</td>
      <td class="tdent">Informacion del Informe 4</td>
    </tr>
  </table>

La pregunta que tengo es, existe la manera de que, cuando se vea desde un dispositivo móvil el <td> del informe 1 y el <td> de la información correspondiente a este aparezcan en una sola columna, y debajo de este le siga el siguiente <td> con su respectiva información y así sucesivamente... ejemplo

Cita:

Informe 1
información del informe 1

Informe 2
información del informe 2

informe 3
...

informe 4
...

He intentado cambiando la opción del display: block, pero me lo muestra así

Cita:

informe 1
informe 2
informe 3
informe 4
información 1
información 2
información 3
información 4