I have table with many row. It's too long for the snippet so i provide the jsfiddle . Basically is html table with many row and structured with
<table>
<thead>text here!</thead>
<tbody>
inside this is td with many tr structure, rowspan and colspan
</tbody>
All i want is :
Thead always appear on the top of the print paper
i want automatically page break of the first tr (MODEL as the starter td)
I already has the solution for the first problem, but why it's look so ugly (some td has stacking problem on the next paper) and get inside the thead? i confused with this...
And if possible, is there any solution for page-break? i already searching all the answer but it must done manually to the which tr should on another page. But i want to automatically doing page break on start tr of MODEL
Thank you, i know my question is basic... but i really stuck here.
You can try scaling out your page using the #page property of CSS3
Your code would somewhat look like this
#media print {
#page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
}
tr,td { page-break-before: always; }
}
Hope it helps!
I am trying to make a table printable, specifically never have it break a <td> entry in half, while maintaining proper borders. I am trying this:
#media print {
table.print-friendly tr td, table.print-friendly tr th {
page-break-inside: avoid;
}
}
However, this still causes a problem where the table data is missing upper or lower margins. Actually, I am not sure it does anything, because without it, the table misses the last margin on the first page. Easier to explain with an image here:
Plnkr here. Everything relevant is in index.html - I think you need to copy it to notepad and run locally to test printing. Note that the only relevant things in that code are the <style> definitions and the table classes.
To summarize - my goal is to make the table break properly AND maintain margins on print.
I have searched a lot for centering a div, both horizontally and vertically, this is the method given everywhere:
div {
position:fixed;
top:50%;
left:50%;
margin-left:(div width/2)
margin-top: (div height/2)
}
I just found a new solution to centering a div, both horizontally and vertically, by wrapping it inside a table. I've tested it in ie7 and above, plus other browsers.
Here is an example : http://jsbin.com/ocenok/2/
I was wondering that the first method is found everywhere on the internet, SO, etc. and requires beforehand knowledge of width and height, or is usually calculated via Javascript.
The table approach seems flawless, and requires neither javascript, nor fixed height/width.
Are there any drawbacks to the table approach ?
(I do not know the height/width of the div that I want to center.)
Update (To make my question clearer) :
I myself hate using tables for non-tabular/layout data.
I know that what I want can easily be achieved using Javascript.
I figured I can achieve this using display:table, killing IE7 support.
But what I'm trying to understand is, that when I can achieve this using a single <table> element, what are the drawbacks, if any.
Checking Answers here and on similar questions, no one has recommended this method, even though it uses all valid HTML elements and syntax and rules.
If everyone is recommending to use javascript to handle presentation, even though it is easily possible using CSS, it must have some drawbacks.
Code :
<table>
<tr>
<td>
<div>This is div that needs to be centered.</div>
</td>
</tr>
</table>
and then apply the following CSS
table {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
table td {
width : 100%;
text-align: center;
}
div {
width:100px;
height:100px;
background:pink;
margin: 0 auto;
}
see the below function and change as per your needs
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
console.log("The calculated position is:");
console.log(top,left);
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
console.log('A jQuery selection:');
console.log($('#lightbox'));
}
Updated answer HTML and CSS:
HTML:
<div id="outer"><div id="inner"></div></div>
CSS:
#outer {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
background:red;
}
#inner {
width: 300px;
height: 200px;
margin-left: -150px; /*** width / 2 ***/
position: absolute;
top: -100px; /*** height / 2 ***/
left: 50%;
background:#ccc;
}
Even more updated using jquery and always remain center when you resize the window too : http://jsfiddle.net/3aZZW/3/
Demo: http://jsfiddle.net/3aZZW/3/embedded/result/
There are different reasons why you should not use tables. Some which have already been discussed here. I understand that you are only using one row and you will hopefully try to keep your promise to not add any rows but if you come to break that promise, some of the reasons below will show a lot more significance, like the rendering speed and the screen reader issue. That's exactly why they call somethings standard and some not. Standards take everything and every situation into account.
Rendering speed issue:
One of the biggest drawbacks of tables is the way they are rendered by browsers. The inside of the table must be loaded before the position and size of the table can be exactly determined. This may cause problems if you are going to have a lot of information in the table.
Validness and standards:
Using tables for non-tabular data means you are writing invalid X/HTML. Which may be fine for some. But I don't recommend. See here
SEO:
I didn't know this before I did a search on some other less heard issues with using tables.
Search engines love valid code, so by not using tables it helps with
Search Engine Optimization (SEO).
See here for more info on this
Problems for screen readers and Braille displays:
Tables can't be used easily in screen readers. Check this article.
If you must use a table for layout, remember that screen readers and
Braille displays read tables row-by-row across the columns. The TAB
order also goes through the table in this way. So make sure that your
table structure makes sense when reading from left to right,
row-by-row.
On the + side:
I hate to admit that if you honestly use just that one table with one row and one column and with a very small amount of data inside (which I would call a limitation) then the page would probably render faster than the time you use Javascript but the other issues remain.
Tables are only meant to be used for tabular data - not for layout purposes.
Using tables for your problem provides a quick and easy solution for you but it doesn't mean it's the best, or correct method.
Just because something takes a little bit more thought and effort doesn't mean it should be avoided.
Use tables for this at your peril - your immortal soul may pay a heavy psychic toll at some future date for your actions today :p
According to StatCounter, as of November 2012, IE7 accounts for only 0.87% of the usage share of desktop browsers. It's not clear how accurate that measure is; some countries are probably disproportionately weighted and the sample-set almost certainly doesn't exactly match your user demographics, whatever they are. But, how much would you really lose by leaving IE7 behind? Might as well go with display: table;
On the other hand, it drives me nuts that display: table; is necessary. This is the closest I can get to a workable alternative:
HTML
<div id="pg-centerer">
<div id="shifter">
<div id="item">content</div>
</div>
</div>
CSS
#pg-centerer {
position: absolute;
left: 50%;
top: 50%;
}
#shifter {
position: relative;
height: 40px; /** Must set the height here. **/
left: -50%;
}
#item {
position: relative;
top: -50%;
}
So far, I haven't figured out how to avoid setting the height of the div#shifter element. Here's a working demo. I've tested this on Mac 10.8.1 FF 18, Safari 6.0, Chrome 25.0.1362.0 canary, and iOS Safari 6.0.1.
There is not much of a problem till you have small data inside table. Tables are somewhat heavy for browsers and with more data coming in, they make your web page response slower in comparison.
The example you have shown is only for an example but in real world you will have data inside it. If its going to be large try choosing a different method. may be the flexbox model or box model that is going to be supported in all modern browsers very soon. See an example here. http://www.kirupa.com/html5/centering_vertically_horizontally.htm
If the data inside is going to be small, feel free to user your method.
Directing my words to the geek inside who care not about standards, or multi-channeling content served... there is really just one technical problem with tables that I can think of, if you have large content inside that cell, the browser will wait for all content to load to be able to calculate the width and height of the cell before rendering... so if that content is really large and has large images, it will not render gradually... and making it a fixed table, well, the trick above won't work.
I depends on what you're trying to achieve. If it's just one page with one thing centered, then its great.
But I see you have set the table position: fixed. Which means it will scroll with you and go on top of content below. The other thing is that, if that table really fills up, you wont be able to see whats at the bottom of that table, since the position is set to fixed.
It's a great solution to center a small piece of text, image or information.
But its a bad thing to use within a page with a lot of other content or a lot of content within the table.
Side note: Using javascript to achieve something simple like that, is stupid. It can be done without javascript using CSS only. What if you use javascript to center something, and a client without javascript visits? Lets not destroy the web by using javascript/jquery for all the simple things ;)
http://phrogz.net/css/WhyTablesAreBadForLayout.html
Basically, it's slightly longer load times (JavaScript is slower), bad for screen readers (test it with one like JAWS), and hard to redesign (really only hard if you happen to forget why the heck you put a table there, so make sure to leave yourself a comment :). What would be really nice (I'm talking to you, W3C!) is something like box-align: x y;. Then you could also do things like align: center center or align: center bottom;.
I would like to create a table with a scrollable body. I'll have my header row, then the data that will scroll while the header is fixed. This is kind of like freezing panes in excel. I tried creating a table above the content I want to scroll, but the column widths don't match up. It looks to me that everything has to be in one table for all the columns to match up. What's the best way to do this?
I set up a fiddle to show what I'm trying to do. I tried a whole bunch of things to make this work, but never got it to come out right.
http://www.jsfiddle.net/polyhedron/pzbmS/2/
Everything seems to look fine to me - assuming that I understand you correctly.
Edit : Sorry - I am sure you looking for an alternatives. These might help
Pure CSS Scrollable Tables
Another similar link...
Here's a quick and dirty jsFiddle I made - it only uses 1 row as you mentioned.
jsFiddle
I had a project where I needed the same behavior. Here is what I came up with:
http://blog.bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/
Here is a demo page of the end result:
http://bobcravens.com/demos/FixedHeaderTable/index.html
Hope this gets you started. Let me know if you have questions.
Bob
Add a text-align: left to thead tr element:
thead tr
{
text-align: left;
}
I am working on taking an IE only site and making it cross browser. Everything is looking good in IE, Chrome, and Safari. However Firefox isn't happy.
I have a table class called "datatable" it is as the name suggests a datatable. I am trying to get it to stretch to 100% of width of the div it's contained in. The div above is 100%. When I use firebug to check it, the table is stretching to 100%. However, the tbody that Firefox generated is not stretching to 100%. So because of that the rows in the table are as small as the tbody. So I have no idea how to fix this. I tried
tbody{width:100%;} and it did nothing.
Any ideas I would greatly appreciate it.
Okay I just answered my question... inside the css there was a generic css like this...
table
{
border:0px solid #000000;
padding:0 0 0 0;
border-collapse:collapse;
border-spacing:0;
display:block;
}
I removed the display:block and everything works great now... I had looked for that on the table.datatable definition, but did think to look for a generic one in the file...
This might be silly, but make sure you're selecting the tbody correctly
#datatable tbody{width:100%}
I had the same issue,
solved it eventually by setting the width property of the header cells (i figured that's what firefox looks at to decide the tbody width).
table.table_class th { width: 115px; }
it's an option if, like me, you don't want to mess with generic css.
Check to see if you have font-size set to something lesser than 100%.
If some browsers need display:block in <table> so ...
table {
// Something..
display: block;
}
body:not(:-moz-handler-blocked) table {
display: table;
}
Example case : HTML in e-mails
Just a bit hack if you still need to preview on Firefox