I am trying to just add a simple table with a few row, each with 3 columns in my wordpress blog.
<table>
<tbody>
<tr>
<td><img src="http://www.alidimare.net/images/loveIs/01.jpg" alt="Love Is"/></td>
<td><img src="http://www.alidimare.net/images/loveIs/07.jpg" alt="Love Is"/></td>
<td><img src="http://www.alidimare.net/images/loveIs/02.jpg" alt="Love Is"/></td>
</tr>
And I have tried to make it responsive using Magic-liquidizer-responsive and tablepress-responsive plugin. The results are not coming in proper, as the images size stays very small even thou the table gets into one single column.
Please let me know how to fix this.
you need to verify if you have any other css files loaded (your theme) overriding your images css, just inspect and verify.. you will probably need to make some custom css ..
you can try adding "!important;"
table td img{
width: 100% !important;
}
you need the images take 100% of their containers (td) so you add
img{
width: 100%
}
with this table will be adaptable to the width
Related
I want to have 3 divs/images (admin has divs, result page has images) in one line, there are 8 of them or more/less (its dynamic).
I used column-count and well, it worked OK, but I have couple problems with it.
First is support, as I have to optimize this for IE7.
Second is how it displays the images (top to bottom instead left to right).
Third one is problems when you have 4, 7, 10, 13, 16 etc. images.
I don't want to use floats. Is there any way to have it responsive? So basically, div with max size of XXXpx and that it will resize instead of just dropping to other line when resizing the page?
...
http://jsfiddle.net/xabxt3re/1/
Sometimes it wont let you resize the right side, just close the page and open it again. Should work. Weird JSFiddle problems. Also after you click there, it adds new image at the end, so you can observe the behavior I want to avoid.
So basically, is there some way, to have 3 divs/images in one line, so they would resize if browser windows is not wide enough, instead dropping to another line?
Or fixing the order in which column-count is showing images and how its filling first two columns with 2 images and not spreading it equally?
Ps.: If somebody down votes my question, could you at least tell me why? So I can improve it and learn for next time? As it's really annoying. I provided all the details and even a code of what I have.
Thanks for edit suggestion. I added space after link, but I forgot you have to add 2 spaces to create one....
Please take a look at this jsfiddle Demo. It should work down until IE8. For IE7 please take a look at this blog post. http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug
try changing the width of the .main class in the jsfiddle
Ok,
so after all the options I tried, I had to agree with this:
I had to switch to tables and it works... How surprising.
So here is the whole code even with JS for adding new stuff in it.
http://jsfiddle.net/xabxt3re/6/
HTML
<table class='table'><tr>
<td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
<td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
<td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
</tr><tr>
<td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
<td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
<td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
</tr><tr>
<td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
<td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
<td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
</tr></table>
CSS
.table{
max-width: 320px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
JS
var NewContent2 = "<td><img src='https://www.hojko.com/download/file.php?avatar=5439_1294832739.jpg'></td>";
$(".table").click(function () {
$page = $(this).children("tbody");
if ($(this).find("td").length % 3 == 0){
$page.append("</tr><tr>");
}
$page.append(NewContent2);
});
I have an html table that is created using constant contact and and I would like to make it responsive and fit the container div holding it.
Here is the demo
I tried the following but this doesn't work as well
<table border="0" width="100%" cellspacing="0" cellpadding="0">
Table aren't great at being responsive and keeping their layout - so it's probably best to override their styles on smaller screens, like:
http://jsfiddle.net/wildandjam/E32Cq/
#media all and (max-width:768px){
table,tr, td, tbody, td p table div, table table{
width:100%!important;
float:left;
clear:both;
display:block;
text-align:center;
}
table img {
max-width:100%;
height:auto;
}
}
Pure css way to make a table fully responsive, no JavaScript is needed. Check demo here Responsive Tables
Here is css
<style>
.tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto;
background-color:green; height: auto; padding: 5px;}
</style>
And here is HTML Part
<div class="tablewrapper">
<table class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Contact</td>
<td>Mobile</td>
<td>Office</td>
<td>Home</td>
<td>Residency</td>
<td>Height</td>
<td>Weight</td>
<td>Color</td>
<td>Desease</td>
<td>Extra</td>
<td>DOB</td>
<td>Nick Name</td>
</tr>
</table>
</div>
Additionally use can use jquery to add tablerapper on page load, if you don't want to manually add tableWrapper div around your table. Just use
$().ready(function(e){
$(document).find("table.responsive").each(function(e){
$(this).wrap("<div class="tablewrapper"></div>")
})
})
It'll be much easier if you don't use html elements that aren't designed to do this job. Tables are used for presenting data, not to hold layout.
If you really need to use tables you'll have to hide and show rows with media queries, which is a pretty bad practice.
If you decide to go with divs, you can float them setting different width in media queries depends on screen size.
I've been looking to your case and I have two answers for you.
The first one is the answer to the question "¿how to make your html table responsive?" (note: Spanish article, you may need chrome page translator for example)
The second one is "you should considere a more semantic markup" (tableless) for that content. Instead of using <table> you should use <ul><li> as follows:
<ul class="itemList">
<li class="item">
<img src="" alt="" />
<p>From</p>
<p class="price">25€<span>per person sharing</span></p>
</li>
</ul>
Then use external CSS to apply style:
.itemList {width: 100%} /*probably not necessary*/
.item {display:inline-block; width: 33%; max-width: /*here your desired max width*/}
.price span {display: inline-block} /*no cells, no floats = no problems*/
Finally you can use #media queries to creat your CSS breakpoints:
#media only screen and (max-width: 480px) {
.item {display:inline-block; width: auto; max-width:100%;}/*just as an example*/
}
Just let me know if you have any further questions
I try to make a lite rwd table extend without any other dependency libraries (ex: jQuery):
https://github.com/sean1093/html-rwd-table
You can simply use as follow:
<div id="myTable"></div>
var myTable = new rwdTableExtend("myTable");
myTable.initTable();
You can use bootstrap to make table responsive.
Define class as table-responsive to make table as responsive.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
TL;DR:
I have a solution that works well for a lot of table implementations, given that you are formatting your tables well (table>thead>tr>th^^tbody>tr>td). Find my CodePen here. Depending on the data in your table, this may be a good mobilizing solution.
The Director's Cut
See my CodePen here.
This solution assumes you have built your tables nicely, meaning you are using thead with th and tbody with td. For example:
<table>
<thead>
<tr>
<th>A</th>
<th>S</th>
<th>L</th>
</tr>
</thead>
<tbody>
<tr>
<td>33</td>
<td>M</td>
<td>United States</td>
</tr>
</tbody>
</table>
Given that the table data isn't characterized by columns and columns of numeric values, this JS / CSS solution works well. You can see it in action on my employer's docs pages (SmartyStreets Documentation) and in human readable form on the CodePen snippet I built for it here. To see it working, resize the screen. Breakpoints are set differently on each implementation, because consistency. Here's how to implement it.
Tables are fed to the tableMobilizer function. Given that it is built on jQuery, this can be done for all tables on the page like so:
var tables = $(table);
tableMobilizer(tables);
You can definitely be more selective about how you mobilize tables with your selector if you need to be.
This will generate a new set of tables for each table passed in and append them after their respective source table. Each new table contains a row of a source table which is transformed with a 90 degree CCW rotation and paired with the table headings.
Old tables are dynamically classed with .hidden-small-down and new tables are classed with .hidden-medium-up for your CSS media queries.
New tables come classed with .mobile-tables (for a collection of all mobile tables generated by a single source table), .mobile-table (for each mobile table representation of a single source table row), .mobile-table-row (for a row in a mobile table), .mobile-table-key (for the first column of a mobile table), and .mobile-table-value (for the second column of a mobile table).
In your CSS, set up your media queries to hide / show the appropriate table views:
#media only screen and (min-width: 768px) {
.hidden-medium-up {
display: none;
}
}
#media only screen and (max-width: 768px) {
.hidden-small-down {
display: none;
}
}
With the media queries implemented, styling the tables is left to your discretion.
After Credits Scene
This is not a silver bullet solution. Visualizations using tabular data can be very complicated. As mentioned above, this solution isn't great for column-heavy tables. It also doesn't handle col and row spanning. As always, seriously consider whether or not you actually need to use a table in your layout (beyond the scope of this comment). If you do, this may be a good solution for mobilizing your tables.
Use media queries and width of your container and font sizes should be in percentage.
The problem here is actually with your table. As you can see, one of the bottom tables has an explicit width set, which is forcing the rest of your table to follow suit:
<table id="content_LETTER.BLOCK1" style="height: 21px;" border="0" width="798" cellspacing="0" cellpadding="0">
Notice the width="798". This will default to pixels. Get rid of any explicitly defined widths and the table should become closer to being responsive.
However, as others have said - responsive tables are tricky. Especially ones containing so many other nested tables (as in your example). You'll also need to address the responsiveness of any images within those tables, as these will likely force the table to be bigger than it needs to be. I would re-visit your whole layout here, and try and adopt a more responsive-friendly element to use throughout your page.
Update:
Please note that the reason #wildandjam's answer 'works' is essentially because he's overwritten the set width of all of your table elements. It's a quick fix but in my opinion it doesn't bridge the gap of understanding.
There's a third party content site that I have to "EMBED" via dynamic content, I don't know Ajax or Jquery at the moment so I am wondering if its possible to shift a table cell down to a new line essentially creating a new row.
The embed ends up with:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
There were no classes or ID's placed in the table, however it is the only table on the page and it has way too much content to fit on one line, this is for a mobile website so I've got to make the whole page 320 pixels wide.
Is it possible using CSS alone?
I can't insert new HTML, the content is dynamically created from a secure server that we don't have access to, but we use an API key in order to access.. mediaqueries work though.
I'm currently trying to experiment with something along the lines of:
td {clear:both;}
You can set the td to display:block; then they'll all be under eachother.
HTML
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
CSS
td{
display:block;
}
See here: http://jsfiddle.net/hDsts/
Other solution (when display: block; not works) is to use inline-block:
CSS
td {
display: inline-block;
}
I am helping a friend with his website (URL: http://mk7vrlist.altervista.org/databases/test.html). I used a table for the design and I put each single inputbox in a <td> .. </td>. I used Javascript for save the datas and PHP for upload them on the server. My problem is that when an user open this page, the table is not well aligned according to the background.
Screen of my desktop.
As you can see, the table is insede the black rectangle, but with other screen sizes the looking is not the same. For solve this problem I used the following code:
CSS:
body {
background-image:url('pictures/bgframe.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
input{
text-align:center;
}
In the table I used this code:
<table id="tab" border="0" style="width:1200px;" align="center">
<tr>
...
</tr>
</table>
This code is not working because with a smaller screen, the align of the table is not the same.Can you help me? If you want, here there is the entire code.
You probably should try relative CSS property, like: width:100%; (instead of hard-coded value in px) in order to scale it properly. Also, it might be useful to explicitly set HTML5 <body> CSS properties: padding:0;margin:0;
Is it possible to rebuild a table looking like this:
<table>
<tr>
<td>information 1</td>
<td>information 2</td>
</tr>
</table>
to something like this with CSS?:
<table>
<tr>
<td>information 1</td>
</tr>
<tr>
<td>information 2</td>
</tr>
</table>
Why I am asking is because this table, which is filled with content in a div, doesn't look nice when I minimize the div for a mobile display.
UPDATE, Reason why I need to do this:
We are building a website for a customer that want's responsive design. The "problem" is that the customer dosen't know html/css that good, so he/she uses a WYSIWYG-editor when providing the content to pages. And of course, he/she knows Microsoft Office, and build the content like it's done in that program, with tables.
You can effectively wrap tds by using media queries and applying css to float the cell into what looks like the next row. You'll want to provide some nice visual queues to help people figure out what they're seeing, though. Here's a fiddle demonstration – resize the preview window.
Using your original markup, and applying the following CSS will wrap the second td when the window is less than 400px wide:
td {width: 200px; border: 1px solid black;}
#media screen and (max-width: 400px) {
td {
width: 100%;
float: left;
}
}
You cannot do that with css (at least not easily), as that only affects the presentation of markup. You could certainly do it with javascript however if you detect that the user is coming to your site using a mobile browser. The question of how you do these things is far out of the scope of your original question however.
A lot of web sites have a mobile version and non mobile version. There are prewritten scripts out there to detect the user-agent in PHP, Javascript, etc etc.
I understand you problem, this would solve it. (ugly fix)
td {
display: block;
clear: both;
}
Rather use divs and css, not tables at all ;)