Intenta entender el código correctamente previamente a utilizarlo a tu trabajo si ttienes algo que aportar puedes comentarlo.
Solución:
MANIFESTACIÓN
Solución CSS: Simplemente gire su td & th para display:block; & su tr para display:table-cell;
CSS:
@media screen and (max-width:767px)
table tr > *
display: block;
table tr
display: table-cell;
Retirarse: Si sus celdas tienen demasiados datos, el diseño se romperá Ejemplo.
Solución jQuery: Podemos realizar un seguimiento de la altura del elemento para permanecer igual MANIFESTACIÓN
JS:
$(function ()
switchRowsAndCols("table", 767);
);
function switchRowsAndCols(thisTable, resolution)
if ($(window).width() < resolution)
switchRowsAndColsInnerFun(thisTable);
$(window).resize(function ()
if ($(window).width() < resolution)
switchRowsAndColsInnerFun(thisTable);
else
switchRowsAndColsRemove(thisTable);
);
;
function switchRowsAndColsRemove(thisTable)
$("tr > *", thisTable).css(
height: 'auto'
);
;
function switchRowsAndColsInnerFun(thisTable)
var maxRow = $("tr:first-child() > *", thisTable).length;
for (var i = maxRow; i >= 0; i--)
$("tr > *:nth-child(" + i + ")", thisTable).css(
height: 'auto'
);
var maxHeight = 0;
$("tr > *:nth-child(" + i + ")", thisTable).each(function ()
var h = $(this).height();
maxHeight = h > maxHeight ? h : maxHeight;
);
$("tr > *:nth-child(" + i + ")", thisTable).each(function ()
$(this).height(maxHeight);
);
;
;
Bueno, pensé que ofrecería un poco diferente jQuery solución a su dilema para otras personas que buscan ayuda adicional.
Si tu tener para usar un script, también podría hacer que haga todo (el siguiente script toma 4.2ms para correr, lo que me parece bastante razonable 🙂
Esencialmente, lo que está haciendo a continuación es tomar su tabular-data y convertirlo en un multidimensional array.
1, 2, 3, 4
5, 6, 7, 8
9, 10, 11, 12
se convierte en:
[[1,5,9],[2,6,10],[3,7,11],[4,8,12]]
Luego, solo es cuestión de que reescriba su table basado en el nuevo array con una pareja for-loops.
Una cosa a tener en cuenta, tendría que vincular esto a un media query o window.resize controlador para obtener el efecto adquirido que está buscando. Eso es tan fácil como cambiar el on.click controlador que he asignado.
¡Echar un vistazo! Es bastante ingenioso:
http://jsfiddle.net/jsR7n/1/
HTML:
a
b
c
d
...etc
Guión jQuery:
$(function()
$('#switch').on('click', function()
var items = [];
var itemsConv = [];
var table = $('#switchItems');
var row,cell;
// FIND ALL OF THE DATA
$("tr").each(function()
var trRow = [];
$(this).children().each(function()
trRow.push($(this).text());
);
items.push(trRow);
);
for(var j=0;j'+itemsConv[i][j]+'
');
row.append( cell );
);
);
¡Espero que esto haya sido útil!
http://jsfiddle.net/jsR7n/1/
Te mostramos las reseñas y valoraciones de los lectores
Si te animas, tienes el poder dejar un tutorial acerca de qué le añadirías a esta sección.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)
Utiliza Nuestro Buscador