I created a table containing one row and many cells. Each cell contains another table with many rows to have data like image, link etc.
The final result is a form of product pager as seen here:
http://askmeexpress.com/
My problem is that cells apear like rows (vertically instead of horizontally) in browsers other than IE. Please check the link in IE then in Chrome and see the difference.
You set TDs to display as block so they display as such
As per CSS specification Chrome and Firefox display this correctly in separate rows. IE displays it incorrectly as table cells (why am I not surprised?).
So in order for your cells to display correctly in Chrome and Firefox and other proper browsers change your cells' display style to table-cell rather then block. Or at least as empty string:
$("YourTdSelector").css("display", "");
Or even better don't use tables for what you're trying to achieve but rather semantically correct elements. In your case that would be the UL element because you're displaying a list of something.
Tables should only be used for tabular data in semantic terms to make your pages accessible to those that need it (i.e. screen readers for the blind).
Related
I am using flying saucer to print an HTML table where cells in first column can span a large number of rows (to multiple pages). The requriement is for the cell to repeat on each page it spans (like a <thead>).
The library supports CSS2.1 and some CSS3 (e.g. the Paged Media Module), but no JavaScript. And as far as I can see, there's nothing in the standards that can directly do this.
Is there any hack or something that can make this possible?
(I control the code that generates the HTML, but the number of rows on a page cannot be predicted.)
I have some tables with print-reapeating thead and many rows. Sometimes a new table starts at the very bottom line of a page, when printing.
I want to force the table to do a page break, if the space left on the page is less than, say 10 cm.
I tried to put an (invisible) overlapping div before that table:
<div style="position:relative;">
<div style="position:abolute; top:0px; width:32px; height:10cm; overflow:visible; page-break-inside: avoid;"> </div>
</div>
<table goes here...>
But it's not working. (FF and IE11)
Is there any way to do that? (I'm trying to print a book, and the table is a new chapter).
I believe this is a bug in Chrome.
The code below demonstrates the best method I've found for multi-page table printing. It has the following features:
column headers repeat on each page
if a page break occurs near the top of the table, it will not leave behind an orphaned set of column headers (a problem which isn't limited to just Chrome)
page breaks occur only between rows
no need to worry about paper size or how many rows will fit-- the browser handles everything automatically
cell borders are always fully closed
the above 3 features apply whether or not the table has headers
works in Chrome!
... and the following known limitations:
doesn't support s (tfeet?)
only supports 1 (which is apparently the most you're allowed to have anyway).
only supports top-aligned
any CSS size values that affect height (including border-width and line-height) must be in px
table cannot (easily) be changed dynamically after the js has run
column widths cannot be set by applying width values to individual table cells; you should either let cell content automatically determine column width, or use s to set specific widths, if needed
I put two tables side by side: the left one (1px) only has a thead with 10cm height, the other contains the contents to print.
That sort of works.
I used float:left; for both tables, so they are side-by-side, but IE11 puts underneath.
Any better idea or an improvment of this approach?
http://weknowwhatyouredoing.com/
I'm trying to make a table like this one where I have a profile image to the left, a bold title/name and text underneath the bold title/name, and date/time stamp underneath that... basically the same views as on that website (http://weknowwhatyouredoing.com/) or better (or twitter tweets).
Anybody know of any tutorials on how accomplish this? I'm currently using table with multiple columns but it seems that when one cell is big, all the cells in that row become the same height and i don't like that. In android this is called a list view but i'm not sure what it is in the html/css world, any help please? Thanks in advance
You could make multiple tables floating next to each other. The elements on the website you show aren't aligned as fa as I can tell.
A tutorial on rowspan and colspan can be found here.
If you make the image span 3 rows, you can put the bold text, content and date stamp each into one row. With valign you can vertically position elements within a row if the row becomes higher than the content. This will probably happen if the 3 rows together are higher than the one spanning row containing the image.
As a quick fix for your issue with the equal row heights, you could use the same layout method as they use on weknowwhatyouredoing.com.
Wrap each column in a separate <div>, and then place your <table> inside.
4 containers, 4 tables with independent row heights.
You shall give a look at the Twitter Bootstrap CSS library Twitter Bootstrap
It's pure HTML5/CSS using only divs.
for improve your knowleges in HTML, you can see W3C (Word Wibe Web Consortium) specs. For sample, if you see this page, W3C explain all structure, attributes, for Table element.
You can find lot of tutorial in google ( search "tutorial create Table HTML" ).
Also, you can help you to understand website structure with browser plugins that display hover element in specific website. ( firebug for Firefox and Chrome, Dragonfly for Opera browser...)
Why not use multiple list elements? Tables definitely don't give you flexibility for responsive designs. Making multiple columns of list elements can be rearranged as needed with limited restrictions
I've sent various HTML emails in the past, and have seen the pretty large limitations associated with it. What I really need is the ability to have regions with a show/hide ability - click the plus sign or a header to toggle.
I'm figuring JS is out of the picture, CSS might be a possibility. I only need it to work in Outlook 2007-2010. Any suggestions?
Thanks!
You can do this in Outlook using anchor tags. The trick is to create 2 tables that are separated by a td cell with a large height specified so that you don't see the second table.
Both tables are exact duplicates except that table 1 has the show link, while table 2 has the content you want to show, and a hide link.
When you click the anchor tag, the email moves down to the position specified in your second table. As the content in both tables is the same except for the show/hide box visibility, you've created an illusion that the box is toggling.
If you have more than one show/hide box, you'll need to create more tables. The email will get really long, but the toggling effect still works in Outlook.
The anchor tags:
Click here to show content
<a name="section1"></a>
Here's a quick example: http://jsfiddle.net/mjcookson/nq3Re/
Update to comment: Also, your email might not fill the entire viewport, so a gap between tables is used to avoid seeing the second table immediately after the first table.
You can't do that in Outlook. Its HTML email rendering engine is pretty bad. I have seen it done for the mobile webkit and android browsers.
See this article: http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/
I'm trying to re-make an existing ASP.Net page which generates labels. The original uses hideous tables-within tables-within tables to force a layout, and as our order quantity has increased it's now got to the point where it's spitting out 65k lines of HTML assuming it doesn't time out first.
I've replaced it with an unordered list for my list of lables, with each list item floated, and the on-screen layout is now perfect. For print, it's 4 labels per page, one in each corner.
However, at least in IE-land, go to print preview and it goes back to being a vertical list.
Any thoughts?
make sure you are using a float:... in your css of li class it will fix it :)
Let me know if that helps
Changed from UL/LI elements to the ubiquitous DIV, and placed every set of 4 inside a container which did the job. Still none the wiser about why FireFox, Chrome and IE all ignored float:left in print though, but it's working now.