{"id":149,"date":"2015-10-16T08:46:42","date_gmt":"2015-10-16T08:46:42","guid":{"rendered":"http:\/\/www.josejavierfm.es\/blog\/?p=149"},"modified":"2015-10-16T08:46:42","modified_gmt":"2015-10-16T08:46:42","slug":"tabla-responsive-hasta-cierto-tamano","status":"publish","type":"post","link":"https:\/\/www.josejavierfm.es\/blog\/2015\/10\/16\/tabla-responsive-hasta-cierto-tamano\/","title":{"rendered":"Tabla responsive hasta cierto tama\u00f1o"},"content":{"rendered":"<p>Tenemos una tabla formada por varias im\u00e1genes, queremos que las im\u00e1genes se reduzcan a medida que la pantalla disminuye, pero a partir de un determinado tama\u00f1o no queremos que se reduzcan mas,sino que salten de linea:<\/p>\n<p>La tabla podr\u00eda ser:<\/p>\n<table id=\"opcionesinicio\">\n<tr>\n<td>\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\" class=\"img-responsive\"\/>\n\t\t\t\t\t<\/td>\n<td>\n<p>\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/>\n\t\t\t\t\t<\/td>\n<td>\n<p>\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/>\n\t\t\t\t\t<\/td>\n<td>\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/><\/p>\n<\/td>\n<td>\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/><\/p>\n<\/td>\n<td>\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/><\/p>\n<\/td>\n<td>\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/><\/p>\n<\/td>\n<\/tr>\n<\/table>\n<pre>\r\n<table id=\"opcionesinicio\">\r\n\t\t\t\t<tr>\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\" class=\"img-responsive\"\/>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/><br \/>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/><br \/>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/><br \/>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/placehold.it\/300x300\"  class=\"img-responsive\"\/><br \/>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t<\/tr>\r\n\t\t\t<\/table>\r\n<\/pre>\n<p>Tal y como est\u00e1 sin css el resultado seria:<\/p>\n<p><a href=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive1.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive1-300x201.jpg\" alt=\"responsive1\" width=\"300\" height=\"201\" class=\"alignnone size-medium wp-image-153\" srcset=\"https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive1-300x201.jpg 300w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive1.jpg 889w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Ahora a\u00f1adimos el css para hacerlo responsive:<\/p>\n<pre>\r\n#opcionesinicio{\r\n    width:100%\r\n}\r\n .img-responsive  {\r\n           max-width: 100%; \r\n           width: auto;  \r\n       }\r\n<\/pre>\n<p>Y el resultado es:<br \/>\n<a href=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive2.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive2-300x45.jpg\" alt=\"responsive2\" width=\"600\" height=\"90\" class=\"alignnone size-medium wp-image-154\" srcset=\"https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive2-300x45.jpg 300w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive2.jpg 920w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Pero si la pantalla es muy peque\u00f1a las imagenes apenas se ven.<br \/>\n<a href=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive3.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive3-300x53.jpg\" alt=\"responsive3\" width=\"300\" height=\"53\" class=\"alignnone size-medium wp-image-152\" srcset=\"https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive3-300x53.jpg 300w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive3.jpg 377w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Aqui es donde a\u00f1adimos el codigo para que a partir de un tama\u00f1o la tabla se rompa<\/p>\n<pre>\r\n@media screen and (max-width:500px){\r\n    \r\n    #opcionesinicio td{\r\n         float:left;\r\n    }\r\n}\r\n<\/pre>\n<p><a href=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive4.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive4-227x300.jpg\" alt=\"responsive4\" width=\"227\" height=\"300\" class=\"alignnone size-medium wp-image-157\" srcset=\"https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive4-227x300.jpg 227w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2015\/10\/responsive4.jpg 422w\" sizes=\"(max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<p>El resultado completo se puede ver en:<\/p>\n<p><a href=\"https:\/\/jsfiddle.net\/18ko3yu8\/\" target=\"_blank\">https:\/\/jsfiddle.net\/18ko3yu8\/<\/a><\/p>\n\n<div class=\"twitter-share\"><a href=\"https:\/\/twitter.com\/intent\/tweet?via=josejavierfm\" class=\"twitter-share-button\">Twittear<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tenemos una tabla formada por varias im\u00e1genes, queremos que las im\u00e1genes se reduzcan a medida que la pantalla disminuye, pero a partir de un determinado tama\u00f1o no queremos que se reduzcan mas,sino que salten de linea: La tabla podr\u00eda ser: Tal y como est\u00e1 sin css el resultado seria: Ahora a\u00f1adimos el css para hacerlo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[13,14],"tags":[],"_links":{"self":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/149"}],"collection":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":5,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/149\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}