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.
Related
I'd like to apply a style only to an outer element (a table), not for the nested on.
Due to the complexity of the system (and since I don't know for sure which other formats are used for the inner tables) I don't want to change the style for all elements first and then overwrite them for the nested ones (that's easy) but really only address the outer elements / tables (also I can't apply classes for now, because them I have to fix that I a bunch of code).
So I have something like that:
<body>
<div>
<...>
<table>
<tr>
<td>
<table>
<tr>
<td>
I'm some content!
</td>
</tr>
</table>
</td>
</tr>
</table>
<...>
</div>
</body>
CodePen: https://codepen.io/MichaelBootstrap/pen/bGBEbYy
First try was
body *:not(table) table:not(.no_tab_margin) {
border: thin solid green; /* just to visualise it */
}
(I use the class .no_tab_margin to stop that ugly fix on all pages, where I change the layout to responsive)
But due to the right-to-left resolution of the browsers, this is still applied to all tables.
How do I have to change the CSS selector such that it only applies on outer tables?
To prevent typical answers: Yes, that would do, but overwrite/reset other styling from the inner tables:
table:not(.no_tab_margin) {
border: thin solid green;
}
table table:not(.no_tab_margin) {
border: unset; /* all borders from all inner tables are gone */
}
If I didn't find a solution with CSS I will write a small jQuery script (Apply a class on all outer tables), that will do that.
To stop discussions about nested tables: Yes, that's long outdated. But I can't change it right now. The system contains more than 500 form/pages, which are generated by PHP. And, yes - I will remove them step by step (and make it all responsive), but that's my job for the next2-3 years - no joke).
Same is also relevant for nested lists (<ul><li><ul> ...) so that not only a special question only for old systems.
You could add a Class or an ID.
And define the custom styles
Solution from pete solves it perfectly:
table:not(table table) {}
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
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 ;)
In the following example,
<table style="width: 100%;"><tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr></table>
How do I set the widths so that the first cell/column is exactly as wide as it needs to be to show the content of the first cell and let the second cell fill the rest of the width of the table?
I'm using a GWT HorizontalPanel to do this, so if there's either a html, css or gwt trick. Please let me know.
Thank you
Assuming that “as wide as it needs to be to show the content of the first cell” refers to width needs to show the content without line breaks, you can use something like this:
<table width=681 border><tr>
<td nowrap>First Cell</td>
<td width="100%">Second Cell</td>
</tr></table>
There is no guarantee that this will keep working, since requiring a cell to be 100% wide, yet include another cell with nonzero width, is an impossible requirement. But browsers currently do what seems to be closest to the requirement.
You could achieve the layout you’re aiming for without tables, as explained in this question:
xHTML/CSS: How to make inner div get 100% width minus another div width
HTML
<div class="two-columns">
<div class="fit-to-contents">First Cell</div>
<div class="fill-remaining-space">Second Cell</div>
</div>
CSS
.two-columns {
overflow: hidden;/* Contains descendant floats */
}
.two-columns .fit-to-contents {
float: left;
background: #ffd;
}
.two-columns .fill-remaining-space {
overflow: hidden;
background: #fdf;
}
I’m not sure if that would actually be appropriate for your use-case though, I’d need to see the context.
Tables take care of themselves in HTML. There is no need to force any cell to be any particular size.
What is it you're really trying to do?
What version of HTML are you using? (Hint: Upgrade to HTML5 and CSS!)
Just don't specify any widths at all (neither on the table nor on the cells) and use white-space: nowrap on your table cells.
Put a style of width:1px on the first cell. The table will then make the first cell as narrow as possible, without causing overflow.
Since "as narrow as possible" is the width of the word "First" in this case, you may want to throw in a white-space:nowrap too, otherwise it will display "First" and "Cell" on two lines.
Jsfiddle