I have some HTML tables which are styled like this.
td
{
width: 20em;
height: 2ex;
}
Please see this fiddle for full details. This source passes the W3 validator with no errors or warnings.
There are three tables in the page. Only the second one seems to have this style applied. Why is this?
Here's how it renders in Firefox 42.0 on Ubuntu.
EDIT: Incorporating Pangloss's suggestion gives me a version which works in JSFiddle but not as a standalone web page.
Here's how the latest version renders in JSFiddle
And here's how it renders as a standalone web page with the same source in the same browser. In this version the first and second tables are fine but the second one has cells too wide. How the heck is this happening?
Alright, the table is trying to fit "too much" in a "too small" of space, you need to make the space bigger, I am making the "body" bigger for this example.
To start, set the font-size to 16px, collapsed the borders on the cells and remove the margins on the body. To make the math easy to understand.
Since em is a relative size to the font. take 16 * 20 (for 20 em) = 320.
Now multiple 320 * 29 (the amount of cells in the table with the most cells) = 9280px
Now you know the minimum width of the body needs to be at least 9280px.
See fiddle: https://jsfiddle.net/DIRTY_SMITH/40t3nzoh/7/
It's only seems like it because the choice of 20em and 2ex is "unlucky" or the table is too big (e.g. the first one).
Starting with the height of 2ex. It is just chosen too small, it is about the height of the letters. Try changing it to 1em, you see no difference, but if you change it to 3em you will notice it, because now it is bigger then the letters size.
Same applies for the first table, since it is several lines big and it can't go any smaller the 2em can't be applied.
Now regarding the 20em.
It feels like it only applies to the 2nd table, because it is the only one so small that the browser actually has room to expand the table.
You can see a huge difference if you take the first and third table and remove every single table data (td) except for, let's say two.
Here your shortened 3rd table to save some work:
<table><tbody>
<tr>
<td style="background:#351e1c">Kurotobi</td><td style="background:#374231">Sensaimidori</td></tr>
<tr>
<td style="background:#614e6e">Futaai</td><td style="background:#6b9362">Wakatake-iro</td></tr>
<tr>
<td style="background:#913228">Benitobi</td><td style="background:#97645a">Umenezumi</td></tr>
<tr>
<td style="background:#c3272b">Akabeni</td><td style="background:#c57f2e">Kuwazome</td></tr>
<tr>
<td style="background:#ffa631">Tamago-iro</td><td style="background:#ffb94e">Hanaba-iro</td></tr>
</tbody></table>
In addition to the first table. The browser again tries to get all the data on the screen without influencing the content (for example letting it overlap).
Now he does that and used all the space he has to display the tables content and decides to just cut of the rest of the space you told him to add (with the 20em).
In case you have 2 screens try pulling the browser window across both of them, you will notice that the browser uses more and more space until he has enough to display the 20em as well.
Hope I could help!
(Btw take a look at external css, helps a lot to keep the code clean
Link how to include a css file externally :)
Related
Here is some very simple HTML. On Chrome (v57) and Firefox (v55) the two cells to the right are the same height, and on Safari (v11) they are not. On Safari the top cell is only as big as needed for the content, and the bottom cell gets the rest of the space.
My question is - is one of these behaviours correct and one a bug? Is there something simple I can do to get Safari to produce the same results as Chrome (like is there a browser styling difference at play here)? I've inspected it and there are no user agent stylesheet differences that I can see.
img {
max-width: 100%;
display: block;
}
.image-cell {
width: 150px;
}
<table border=1 cellspacing=0 cellpadding=0 bgcolor="#3faaed">
<tr>
<td rowspan="2" class="image-cell">
<img src="http://www.rizwanashraf.com/wp-content/uploads/2009/04/gorgeous-chrysanthemum-3d-wallpaper.jpg" />
</td>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>
I know there are a limitless number of ways that I can produce a image with two equal sized boxes next to it - that isn't the question. The question is, why the difference, and, can simple styling be added to homogenize them? (This is a learning question, as I say, there are a million ways to display two boxes beside a box. That's not what I'm asking.)
The spec leaves this explicitly undefined:
CSS 2.2 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.
This means in particular that CSS does not define how the height of a cell spanning more than one row is distributed across the rows that it spans.
There is no good way to homogenize the table's appearance except by providing absolute heights to the table and/or the table rows. Given an arbitrary image whose height is not known in advance, this is pretty much impossible with CSS table layout.
Table cells are rendered arbitrarily depending on their content, so you can never be sure how they are going to be rendered. Specifying dimensions is the way to get specific results.
I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.
<tr class="tblpadding">
<td>Character:</td>
<td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>
Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/
Because the column cell has larger width because of the input type text boxes, just add colspan to that cell
Demo
Also, I just saw that you've inconsistent table cells in your
example, so make sure you fix them according to your requirement.
But as far as the explanation goes, you need to use colspan on the column which will contain those images.
Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..
actually, you should not be using table for creating a layout in the first place.
use div's instead.
to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.
I've created the same look that your table have , using div's only.
if its the same, why bother? because my layout have a flexibility that yours dont have.
take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/
As title states, I have a problem with extra space in table cell, here is and example:
http://jsfiddle.net/pzcMH/60/ (go here http://jsfiddle.net/pzcMH/60/show/ if you want to see html page directly). You can see that table cell under 'footer wrapper' row is higher than 'center_wrapper' table (in IE6 and IE7) and I want it to be same height, like it is in all modern browsers.
After googling, I tried:
adding cellspacing=0 and cellpadding=0
removing extra new lines and spaces
adding padding and margins with 0px
...
and nothing helped.
Off topic:
Someone will probably say that I shouldn't make layout, like in 2001, but I don't see a way to solve a problem with with extra wide elements not fitting in page (http://stackoverflow.com/questions/9632505/fixed-layout-wide-content-tables) without table and it seems that I will manage to implement sticky footer with tables.
Another interesting bug of IE6/7 is that if I change 'footer_wrapper' row id to class (and modify css accordingly, of course) it stops working. Any ideas why?
thanks.
So, maybe this is a typo but I came across some old code:
<td valign="top" width="*">
Was this a typo? or does this do something special?
This allows means "remaining space". You can use several in conjunction. e.g..
<td valign="top" width="*">...</td><td valign="top" width="2*">...</td>
Together, these two columns will use all the horizontal space available. The second will be twice as wide as the first.
Update:
To respond to the comment made below, I found the following on the W3 site:
Proportional specifications (e.g., width="3*") refer to portions of the horizontal space required by a table. If the table width is given a fixed value via the width attribute of the TABLE element, user agents may render the table incrementally even with proportional columns.
However, if the table does not have a fixed width, user agents must receive all table data before they can determine the horizontal space required by the table. Only then may this space be allotted to proportional columns.
Source: http://www.w3.org/TR/html4/struct/tables.html
"*" is MultiLength value defined in HTML. See: http://www.w3.org/TR/html4/types.html#h-6.6
That's not "inline style", but legacy HTML that should be avoided in favor of CSS. But, to answer your question, it means, essentially, "fill". But, in practice it has no effect and can be safely removed.
http://jsfiddle.net/sn4qn/5/
Perhaps it's there as an indicator to future developers that the width was intended to be set automatically by the browser.
Is it possible to repeat table headers in Safari on every printed page?
This code works in Firefox but not in Safari:
<table>
<thead>
<tr>
<td>Header1</td>
<td>Header2</td>
</tr>
</thead>
<!-- lots of rows -->
</table>
Edit:
the following doesn't fix it, therefore it can't be the same bug that IE has:
thead { display:table-header-group; }
To answer my own question:
After googling and getting no correct answer I think that there exists simply no method to accomplish it. Maybe later versions of Safari will include it.
You could consider reprinting the thead periodically as you go down the table. If the table is rather long, this might prove beneficial even when viewed on screen, as the header will most likely scroll off the screen pretty quickly. If you don't want to show it on screen, though, you could add a class to the reprinted headers, hide them on screen, and display them only in the print stylesheet.
You may want to consider creating a CSS sheet for the printed version of your page. If you opt for that route, use the "position:fixed;". Elements positioned as 'fixed' are printed on every printed page.
The tricky part is that any positioned element (i.e. position property is not 'static') is taken out of the document flow. This makes alignment, of other (regular flowing) elements with the fixed elements tough.
Based on the information in your question, I would wrap the entire table in a fixed element (or create a class such as .printedTable with the position property set to fixed). This way, the table structure would repeat on each printed page.
Good luck.
A.