Question:
Date: 12-03-2015 06:11:16
(In Spanish)
Si bien la respuesta podría ser "utlizar el width de las columnas con % y limitar a una mínima y máxima resolución con los min-width/max-width y min-height/max-height de CSS" sería bueno que entre todos realicemos un ejemplo funcional.
Aquí un modelo de tabla que podríamos utilizar (en honor al ranking de los usuarios que más han contribuido con la comunidad).
Saludos y buen código!
Fernando Votes: 1 - Answers: 9 - Views: 42 Share on: Google Facebook Twitter LinkedIn Link
¿Cómo crear una tabla html responsive?[Resolved]
Hola a todos, en esta oportunidad les planteo la pregunta ¿Cómo crear una tabla responsive?Si bien la respuesta podría ser "utlizar el width de las columnas con % y limitar a una mínima y máxima resolución con los min-width/max-width y min-height/max-height de CSS" sería bueno que entre todos realicemos un ejemplo funcional.
Aquí un modelo de tabla que podríamos utilizar (en honor al ranking de los usuarios que más han contribuido con la comunidad).
Saludos y buen código!
Fernando Votes: 1 - Answers: 9 - Views: 42 Share on: Google Facebook Twitter LinkedIn Link
Answers:
-
Date: 12-03-2015 08:13:14 Dejo una intermedia, cumple con el objetivo la termino en unas horas (break), ahora estoy en el trabajo :)
https://piratenpad.de/p/4We8OOAzRz7uMXUZ
Código completo:
<!DOCTYPE html> <html lang="es-PE"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Demo Tabla</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300,700' rel='stylesheet' type='text/css'> </head> <body> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } a { text-decoration: none; padding: 0; line-height: inherit; } .active a { color: blue; } table { width: 600px; height: auto; margin: 50px auto 0; padding-bottom: 10px; border-collapse: collapse; font-family: 'Open Sans', sans-serif; } table caption { height: 30px; text-align: left; } table caption p { line-height: 2; padding-left: 10px; font-weight: 100; font-size: 13px; } table thead { background: white; } table:after { content: "No hay mas resultados por mostrar...."; font-size: 10px; text-transform: lowercase; color: rgb(131, 131, 131); } table tr:nth-child(odd) { background: #eee; } table tr td { font-size: 12px; font-weight: 400; text-align: center; } table thead td { text-transform: uppercase; font-size: 10px; padding-bottom: 5px; } table thead tr { background: white !important; border-bottom: 1px solid rgb(232, 232, 232); } table tbody { border-bottom: 1px solid rgb(234, 234, 234); } table tbody td { padding: 4px; } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { table { width: 70%; margin: 0px 50px; position: relative; } table thead { display: none; } table tr td:before { position: absolute; left: 5px; width: auto; max-width: 100px; } table tr td:nth-child(1):before { content: "nombre:"; } table tr td:nth-child(2):before { content: "email:"; } table tr td:nth-child(3):before { content: "karma:"; } table tr td:nth-child(4):before { content: "preguntas:"; } table tr td:nth-child(5):before { content: "respuestas:"; } table tbody td { display: flex; padding-left: 50%; } } </style> <table> <caption> <p>Ranking de usuarios que mas contribuyen</p> </caption> <thead> <tr> <td colspan="" rowspan="" headers=""> </td> <td colspan="" rowspan="" headers=""> email </td> <td colspan="" rowspan="" headers=""> karma </td> <td colspan="" rowspan="" headers=""> preguntas </td> <td colspan="" rowspan="" headers=""> respuestas </td> </tr> </thead> <tbody> <tr> <td>Julio Julcca</td> <td colspan="" rowspan="" headers=""> jjulca@gmail.com </td> <td colspan="" rowspan="" headers=""> 36% </td> <td colspan="" rowspan="" headers=""> 34 </td> <td colspan="" rowspan="" headers=""> 98 </td> </tr> <tr> <td>Julio Julcca</td> <td colspan="" rowspan="" headers=""> jjulca@gmail.com </td> <td colspan="" rowspan="" headers=""> 36% </td> <td colspan="" rowspan="" headers=""> 34 </td> <td colspan="" rowspan="" headers=""> 98 </td> </tr> <tr> <td>Julio Julcca</td> <td colspan="" rowspan="" headers=""> jjulca@gmail.com </td> <td colspan="" rowspan="" headers=""> 36% </td> <td colspan="" rowspan="" headers=""> 34 </td> <td colspan="" rowspan="" headers=""> 98 </td> </tr> <tr> <td>Julio Julcca</td> <td colspan="" rowspan="" headers=""> jjulca@gmail.com </td> <td colspan="" rowspan="" headers=""> 36% </td> <td colspan="" rowspan="" headers=""> 34 </td> <td colspan="" rowspan="" headers=""> 98 </td> </tr> </tbody> </table> </body> </html>Votes: 1 - Link answer -
Date: 12-03-2015 08:27:52 Yo me encontré una hace tiempo.. Aclaro el código no es mio y no recuerdo el sitio donde lo encontré, pero funciona y lo he implementado en varios programas..
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="estilo.css" rel="stylesheet" type="text/css" /> <title>Documento sin título</title> </head> <body> <table class="tabla"> <thead> <tr> <th>Order</th> <th>Reference</th> <th>PO Number</th> <th>Order Date</th> </tr> </thead> <tbody> <tr> <td>5956379</td> <td>4306</td> <td>787</td> <td>March 12, 2015</td> </tr> <tr> <td>5956378</td> <td>38815</td> <td>787</td> <td>March 12, 2015</td> </tr> <tr> <td>5956377</td> <td>-1</td> <td>787</td> <td>March 12, 2015</td> </tr> </tbody> </table> </body> </html>
La Hoja de Estilo es la siguiente
@charset "UTF-8"; /* CSS Document */ .tabla{ width:100%; } td, th, .tabla{ border-width:2px; border-color:#000000; border-style:solid; } @media screen and (max-width:720px){ table, thead, tr, th, tbody, td{ display:block; } thead tr { position: absolute; top: -9999px; left: -9999px; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } td:nth-of-type(1):before { content: "Order"; } td:nth-of-type(2):before { content: "Reference"; } td:nth-of-type(3):before { content: "PO Number"; } td:nth-of-type(4):before { content: "Order Date"; } }Votes: 3 - Link answer -
Date: 12-03-2015 09:58:14 Ya realice un ejemplo, pensaba subirlo por este medio pero en vista de que no puedo arrastrar archivos
copio el código:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Table</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> </head> <body> <div class="table-responsive"> <table class="table table-hover table-striped table-bordered"> <tr> <td><h4>País</h4></td> <td><h4>Usuario</h4></td> <td><h4>Karma Usuario</h4></td> </tr> <tr> <td>Argentina</td> <td>FernandoMosquera</td> <td>686</td> </tr> <tr> <td>Argentina</td> <td>Walter Sanchez</td> <td>219</td> </tr> <tr> <td>Ecuador</td> <td>Jose Delgado</td> <td>151</td> </tr> <tr> <td>México</td> <td>Faustino Vazquez</td> <td>101</td> </tr> </table> </div> </body> </html>
Votes: 1 - Link answer -
Date: 12-03-2015 10:00:13 Utilice bootstrap, de igual manera adjuntare en el grupo de Fb el archivo para que lo puedas visualizar y me comentes que te parece.!!
Saludos! Votes: 0 - Link answer -
-
Date: 12-03-2015 11:40:51 Pero que la Pregunta indicaba que no se debía usar un Framework.?????????????? Votes: 0 - Link answer
-
Date: 12-03-2015 13:46:58 Hola soy nuevo en esto pero a lo que e leído en general la respuesta son muchas y seria ilógico que te pongan todas de una sola ves aquí, ahora si te das cuenta bootstrap tiene tablas responsivas y no digo que lo uses al contrario mira el código de bootstrap y puedes guiarte para tener una idea de como hacer tu propia tabla responsiva
Saludos!! Votes: 1 - Link answer -
Date: 13-03-2015 02:36:33 Recomendaria bootstrap para tener una tabla responsive Votes: 0 - Link answer
-
Date: 01-12-2015 16:39:48 Boostrap garantiza que el maquetado sea responsive, es un framework muy completo, que incluso se apoya de javascript para navegadores incompatibles que no pueden resolver ciertas características de CSS, pero es un buen ejercicio el conocer la base de web responsive, aportaré información a la solución planteada por faustino vasquez, position absolute es sólo cuando se desea manipular la posición de elementos HTML, el concepto web responsive es adaptabilidad por lo cual forzar el html con position absolute no debería ser correcto, la clave está en determinar que columnas deben tener un tamaño mínimo y a esas usar un ancho en %, las otras deben responder según el ancho restante (no se le debe poner ancho), si se usa min-width o max-width entrariamos en el problema de compatibilidad de navegadores relativamente viejos (IE <=9 puntualmente), pero poner un coto mínimo te garantiza un buen diseño y no destruiría visualmente la tabla cuando la resolución es bastante pequeña, es cuestión del proyecto y de gustos, espero sirva de algo mi aporte. Saludos Votes: 0 - Link answer
To actively participate in the community first must authenticate, enter the system.Sign In
