0

Estoy mostrando algunos datos de personas en una tabla responsive de materializecss pero tengo el problema de que las cabeceras <th> no se corresponden con el cuerpo y se muestran mal.

El codigo que tengo es

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table class="responsive-table">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Foto</th>
      <th>Eliminar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Persona1</td>
      <td>Persona1</td>
      <td><img width="100px" src="http://www.consejosgratis.es/wp-content/uploads/2012/09/como-crecer-como-persona.jpg" alt=""></td>
      <td><button class="btn blue">Eliminar</button></td>
    </tr>
    <tr>
      <td>Persona2</td>
      <td>Persona2</td>
      <td><img width="100px" src="http://cdn2.salud180.com/sites/default/files/field/image/2013/07/sermejorpersona2.jpg" alt=""></td>
      <td><button class="btn blue">Eliminar</button></td>
    </tr>
    <tr>
      <td>Persona3</td>
      <td>Persona3</td>
      <td><img width="100px" src="http://static.vix.com/es/sites/default/files/styles/large/public/imj/otramedicina/4/4-formas-de-saber-si-una-persona-tiene-mala-vibra-3.jpg?itok=W2113aMh" alt=""></td>
      <td><button class="btn blue">Eliminar</button></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Actualmente se muestra asi:

error1

Y quisiera que se muestre asi:

correcto1

1 respuesta 1

0

Añadiendo una clase llamada "foto" tanto al th como al td donde va la imagen y dándole un poco de css en la resolución adecuada en este caso cuando se reduce por debajo de 992px se aplica el estilo que fuerza el mínimo de altura a las filas:

@media only screen and (max-width: 992px){
    table .foto {
        min-height: 13.25em !important;
    }
}

el html quedaría así:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    
    <style>
    @media only screen and (max-width: 992px){
        table .foto {
            min-height: 13.25em !important;
        }
    }
    </style>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>

</head>
<body>
<table class="responsive-table">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
      <th class="foto">Foto</th>
      <th>Eliminar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Persona1</td>
      <td>Persona1</td>
      <td class="foto"><img width="100px" src="http://www.consejosgratis.es/wp-content/uploads/2012/09/como-crecer-como-persona.jpg" alt=""></td>
      <td><button class="btn blue">Eliminar</button></td>
    </tr>
    <tr>
      <td>Persona2</td>
      <td>Persona2</td>
      <td class="foto"><img width="100px" src="http://cdn2.salud180.com/sites/default/files/field/image/2013/07/sermejorpersona2.jpg" alt=""></td>
      <td><button class="btn blue">Eliminar</button></td>
    </tr>
    <tr>
      <td>Persona3</td>
      <td>Persona3</td>
      <td class="foto"><img width="100px" src="http://static.vix.com/es/sites/default/files/styles/large/public/imj/otramedicina/4/4-formas-de-saber-si-una-persona-tiene-mala-vibra-3.jpg?itok=W2113aMh" alt=""></td>
      <td><button class="btn blue">Eliminar</button></td>
    </tr>
  </tbody>
</table>
</body>
    

1
  • Genial, muchas gracias por la respuesta, no lo había pensado así. el 6 sep. 2017 a las 5:32

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.