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 ;)
Related
On the desktop email clients, I want my td elements to show up side by side. Which they do, that's originally what a td is built to do.
<table>
<tbody>
<tr>
// These sit side by side in the email client on Desktop
<td width="300">
content
</td>
<td width="300">
content
</td>
</tr>
</tbody>
</table>
However, on the mobile view.
Using a Media Query. I want to take these and make them full width/block, one on top of the other when the screen width hits 600px. But this doesn't seem to be working. I've tried a fair variety of things. Making these table's instead of td's was one way that worked.
However it wouldn't work in Outlook and a variety of other clients.
<table>
<tbody>
<tr>
// These sit side by side in most email clients on Desktop (not Outlook), and stack on mobile.
<table>
content
</table>
<table>
content
</table>
</tr>
</tbody>
</table>
My Second approach was using tr's and setting their display to table-cell. This also worked, but only a select few clients.
<table>
<tbody>
<tr>
// These sit side by side in most email clients on Desktop (not Outlook), and stack on mobile.
<tr class="display: cell">
content
</tr>
<tr class="display: cell">
content
</tr>
</tr>
</tbody>
</table>
Does anyone know a good way to do this?
Best example for it would be:
<style>
#media only screen and (max-width: 600px) {
th {width:100% !important; display:block !important;}
}
</style>
<table>
<tr>
<th width="48%">CONTENT</th>
<th width="48%">CONTENT2</th
</tr>
</table>
This is because Android native client will not recognize the display block on TDs anymore, so you can get around this by using TH. This may not work in the Gmail App though as it doesnt recognize the style tag, so you may need to create mobile first and put media queries or max-widths along with MSO conditionals on desktop breakpoints to create desktop version.
Thanks for the help guys.
Overall I found this link:
https://blog.jmwhite.co.uk/2014/09/08/turning-floated-tables-columns-outlook/
This helped out a lot with my issue. It helped me realize what I was doing wrong in my design, as well as introduced me to the mso conditionals.
The original issue was that there is so much padding added in Microsoft Outlook, I had to use:
border-collapse: collapse;
Along with the MSO space style:
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
And these were both style definitions on all of the tables, and table data tags within the entire document.
This removed enough spacing that allowed my images to fit two tables, side by side.
Thus in this scenario, I was able to use two tables, to fit two elements side by side in an email, and set them to full width so that they would stack in smaller screen sizes.
Actually the best way to do this is to have a table to wrap all your "TDs," but then instead of multiple TDs just put a bunch of tables in your table's main TD. The outer table is a container that can be used to constrain the inner tables.
This technique works with all major email clients. (Edited this for the comments)
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#media only screen and (max-width: 479px) {
.mobile_width {width:100% !important;}
}
</style>
</head>
<body>
<table width="600" class="mobile_width">
<tr>
<td>
<table width="200" align="left" class="mobile_width">
<tr><td></td></tr>
</table>
<table width="200" align="left" class="mobile_width">
<tr><td></td></tr>
</table>
<table width="200" align="left" class="mobile_width">
<tr><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I would move away from tables and instead create your own "blocks" using something like Bootstrap. Or better yet, something that's specifically just a grid system like Responsive Grid System.
If you are going to do it with a table, you will need to use media queries to tell the browser how to "re-lay" the content at specific sizes. A Google search on "CSS Media Queries" should tell you all you need to know, and media queries work in most browsers.
You need to look into media queries within your CSS.
Example:
#media all and (max-width:900px) {
div#example { display: block; }
}
fiddle with possibly a better solution : http://jsfiddle.net/7pgdjckr/
I have an issue that seems to be isolated to Chrome...which is usually NOT the way it goes. However, I have recreated the issue as purely as possible in the following plunkr.
http://plnkr.co/edit/k0viyc
To illustrate the problem, here is an image that displays the border in the highlighted row in Chrome and how it isn't showing in IE.
If you remove either of the following rows:
<tr class="spacer">
<td colspan="14" class="noBorder noBackground">
*** By removing this row, the extended border goes away ***
</td>
</tr>
You will see the associated border shows/hides.
We've been through lots of tests on this and can't isolate the problem. The primary css remains in the plunkr, including the inline styles and classes that are primarily byproducts of related bindings.
I would like to know if there is an error in the current design or if this is truly a bug in Chrome. If it's a bug, what is the least common elements here needed to recreate it? Is it worth submitting as a bug or is this just going to be a scenario we should just try to avoid.
Thanks for your time in advance.
Looks like to be a Chrome bug.
Minimal showcase reproducing it
.test {
border-collapse: collapse;
}
td {
border: solid 1px blue;
}
.no {
border: none;
}
<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>
Chromium tracking (somehow) related border rendering bug
A little disturbing the mention
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
In conclusion:
If the table has border-collapse
and the cell is colspaning
Then different border settings (for that cell, implicitly) will fail
Posibilities to fix it:
Setting border-style: hidden to the cell has higher priority and will hide all the borders (not good)
Removing colspan in the spacers
or maybe remove fully the spacers rows and handle the display without them.
Some glitch related to tr.spacer.
As a workaround set colspan=7 to td in tr.spacer.
Since this seems to be a bug with Chrome—instead of using a colspan, you could write out the remaining cells needed to complete the row, and be sure that they don't have a class that includes a border.
This:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border"> </td></tr>
Would become:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border"> </td><td class="no-border"> </td></tr>
I had to use border-collapse, and was having the same problem. This simple HTML markup change worked for me.
After days of this issue being on my mind, a super hacky solution finally hit me.
Set the border color to the same color as your background.
td {
border: 1px solid (background color);
}
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 currently have a java script solution to make an entire table row clickable. I need to support the non-java script folks so is this possible without java script?
I can add a a href tag to each cell but that seems like overkill and it also only lets the user click on the contents of the cell.
Any other alternatives to turn an entire table row into a hyperlink?
Not without putting a link inside each cell unfortunately, otherwise it's not valid markup.
You can still make it appear like the "row" is clickable though by making the links display as blocks so they take up the entire cell.
e.g. (jsFiddle)
<table>
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
tr:hover { background: #ddd; }
td { border: 1px solid #000; border-collapse: collapse; }
td a { display: block; padding: 5px 20px; }
I realise this is an old thread with a perfectly legit solution in Rich's answer. There is however also a way to do this without javascript AND without duplicating your link * the number of columns AND keeping your markup/CSS valid. It took me a while to figure out, so I thought I'd post it here for others that also happen to end up on this thread like I did.
Put the link in the first column:
<table class="search_results">
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
This is perfectly fine markup, so your only real issue is getting that link to span the width of your table. I did it like this using pretty standard CSS:
table.search_results a {position:absolute;display:block;width:98%;}
Change the width to whatever you want and in principle you are done and dusted. So that is all relatively easy, however if you, like me, have a fluid/responsive layout, and also some standard styling on your links plus some padding on your tables, you are going to need these rules (copied necessary from above and added extra).
table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}
To explain:
The first rule removes all padding on my first td ONLY. By default the padding on my td is .5em.
The second rule adds the same padding back on the link, otherwise you end up with misaligned cell contents. It also corrects a few standard styles I have on my a to ensure the columns all look the same. You could do this the other way around too (add the link styles to your td).
With the last two rules I get rid of the default hover effect on my links, then put it on the tr for any tables with the right class.
This works in the browsers I care about, but you should of course test in those you care about :) Hope I help save someone some minutes with this writeup!
Various browsers may or may not allow you to wrap the entire TR with an href, HOWEVER, even if the browser supports this, it is not valid (X)HTML and the results will vary from browser to browser in a very unreliable way (updates could change behavior as well).
Your best bet is to either use JS, or put an href inside of each cell.