[SOLUCIONADO] Tablas reponsives

GoldWar · #1 (**permalink**) 12/02/2015, 06:53

Buenos días estoy desarrollando una tienda online a código y creé una "aplicación" para el mostrador de la ropa pero me he fijado que todas las tiendas usan tablas responsives y lo veo más cómodo y también a la hora de usar el php para crear las tablas.

Mi pregunta es: ¿Como se hace una tabla responsive? busqué por google pero no salen las tablas que yo necesito. Que las filas tengan más o menos <td> dependiendo del tamaño de la pantalla y que se reorganicen automáticamente.

¿Alguien podría darme un poco de luz en el tema?

Vale aquí está la solución era mas sencillo de lo que me imaginaba: http://jsfiddle.net/gQBpU/13/

Alexhg42 · #2 (**permalink**) 12/02/2015, 18:36

[Veo que ya resolviste tu problema, igual, aquí esta una tabla un poquito mas compleja y que puede que te pueda servir un poco mas; lo mejor es que no usa ni js ni jquery, puro css puro y duro. El único problema es que tienes que agregar manualmente "td:nth-of-type(n_columna):before { content: "title_columna"; }" por cada una de las columnas. pero amenos que tu tabla aumente de columnas automáticamente, esta tabla es genial por donde la mires.

Index.html

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="estilo.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
        @charset "UTF-8";
/* CSS Document */
.inmodal-table{
	width:100%;
	}
@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: "Nombre"; }
	td:nth-of-type(2):before { content: "Edad"; }
	td:nth-of-type(3):before { content: "Sexo"; }
	td:nth-of-type(4):before { content: "Ciudad"; }
	}
        </style>
	<title>Documento sin título</title>
</head>
<body>
	<table class="tabla">
    	<thead>
    		<tr>
                <th>nombre</th>
                <th>edad</th>
            	<th>sexo</th>
                <th>ciudad</th>
            </tr>
        </thead>
    	<tbody>
        	<tr>
                <td>Pedro</td>
                <td>20</td>
            	<td>M</td>
                <td>Merida, Yucatan</td>
            </tr>
            <tr>
                <td>Carmen</td>
                <td>20</td>
            	<td>F</td>
                <td>Morelia, Michoacan</td>
            </tr>
            <tr>
                <td>Juan</td>
                <td>25</td>
                <td>M</td>
            	<td>Guadalajara, Jalisco</td>
            </tr>
    	</tbody>
    </table>

</body></html>

Saludos!