I'm using the latest version of Firefox and Chrome on Win XP. I want to display two tables on the same horizontal plane. However, I'm having a problem. Right now I have:
<table width="100" style="display: inline-block;">
...
</table>
<table width="100" style="display: inline-block;">
...
</table>
However, right now, the two tables overlap because the content of the first table is bigger than 100 pixels. Without changing the width, does anyone know how I can change/add to the styles so that the second table will appear to the right of the first table but clear all of the first table's contents?
In principle you could just set overflow: hidden on the first table, but IE (even IE 9) does not implement it properly in this case. The workaround is to wrap your tables in div elements and set the relevant properties on them:
<style>
.tablediv { display: inline-block; width: 100px; overflow: hidden }
</style>
<div class=tablediv>
<table>
...
</table>
<div class=tablediv>
<table>
...
</table>
This way, the content in one of the tables that does not fit into the allocated width is complete absent from the rendering. So it might be more effective than desired, but the question was not quite clear in this respect.
If you are sure the first table never is wider than 100 pixels, you can leave the first table as is and give the second table an absolute position.
Don't change the display property, it will disrupt things.
Related
Consider the following code (jsfiddle):
<table>
<tr>
<td>
<img
src=some-image.png
style="max-width: 100%;"
>
</td>
<td style="
width: 100%;
background: yellow;
">
the second cell
</td>
</tr>
</table>
Firefox 33 and Internet Explorer 11 render this one way, while Chrome 38 renders it differently. In FF/IE, the image is displayed at its natural size. In Chrome, the image completely disappears (having been shrunk into oblivion).
It appears to me that the browsers disagree on the meaning of max-width when provided in the context of an auto-sized table cell, where the cell is part of a table whose width exceeds the window. I would have expected the image cell's width to be computed before application of `max-width' property.
I realize this is a totally contrived example. I'm not looking for work-arounds; I'm asking because I'm simply interested in learning about the corner cases of CSS rules.
CSS defines some pretty specific rules about box sizing and layout computation order when it comes to percentages. Any ideas what's going on here? Which browser is right?
Providing this as an answer:
From the spec, regarding max-width with a percentage value:
If the containing block's width depends on this element's width, then
the resulting layout is undefined in CSS 2.1.
fiddle - here you got 2 exacly same styled tables. TD's width is auto adjusted by table-layout. It works ok, when there is only one line of text. But when there is more text and text is warped it seems like width is calculated by all the text (like it was in one line), not by the longest warped part of text.
Question is how to center content of table nr 2 the same way as it is done in 1'st table? (atm it dont look like centered at all...)
- this is how it should look (lower one) - dont needed yellow space should be cutted to allow table to be centered.
td { text-align:center }
The text in the first table isn't actually centered. It just appears that way because it has no breathing room on either side of the cell.
Making a global declaration like the above would allow additional tweaks to remaining cells.
td.first { text-align:left; font-weight:700 }, etc.
EDIT
You're not going to be able to achieve that effect without declaring a width. Tables don't act like divs by default, so I gave it display:block, width:80% and now the tables center, the td wasn't filling its parent correctly, so I gave it width:100%.
I think this is what you're after: http://jsfiddle.net/hJXb9/
I think you are looking for this.
<table style="width:60%;margin-left:20%;margin-right:20%;">
<tr>
<td style="background:green;text-align: center; vertical-align: middle;">
TADA
</td>
<td style="background:yellow;text-align:center; vertical-align: middle;">
Lorem ipsum dolorsitamet kjfldslggfh;l</td>
</tr>
</table>
Live Demo
Hope, i will helps you. Thanks. !!
Most table markup can be translated to CSS. However, here's one situation I can't find an exact CSS translation for. Basically, two columns, where the left column expands to minimum width required to contain its content, and the second column fills the rest of the screen. Is this even possible in CSS?
<table width="100%">
<tr>
<td>This will expand to the minimum it needs.</td>
<td width="100%">This cell tries to get as much width as it can.</td>
</tr>
</table>
I just thought to try this, which appears to work but I don't know if there are problems with this (such as browser compatibility). If you can provide a better solution or even the same solution with additional info I'll accept your answer.
<div>
<div style="float: left;"></div>
<div style="overflow: hidden;"></div>
</div>
So I have a table with only two columns and one row. The second td holds an image, and the first holds text. I would like the td containing the image to be at the minimum size possible with that image inside, and the first td to fill the remaining space. The following works in every browser except IE7 (we are not doing IE6):
<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>
What happens is this:
The page renders correctly, then when you mouse over the table, the first td expands to fill the entire table, pushing the image off the edge.
I could fix this with some jQuery to measure the width of the image and calculate remainder for the first td; but that solution is full of LAME!
Please help. I do not understand why IE7 feels the need to redraw the way it does.
Try the following code instead. Instead of explicitly declaring too much width, try explicitly declaring too little (because the image will push the width beyond 1% anyway.)
I am writing this off the top of my head without actually having looked in IE7, but I have IE7 in a Virtual Machine at home and so I'll comment back later if I find a different solution.
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TEXT</td>
<td width="1%" style="width: 1%;"><img src="http://www.google.com/intl/en_com/images/srpr/logo2w.png" alt="Google Logo" /></td>
</tr>
</table>
There are a couple of things that you could try:
Make sure you're using a reset.css stylesheet to reset all of the browser defaults and accommodate any browser quirks. That's especially important with Internet Explorer.
Only use tables for tabular data — I'm not sure what the rest of your table contains, but unless there's going to be rows of data, it would be much easier to use a container div with a p and img floated.
Set the width and height on the img.
Use CSS position: relative; float: left; to see if it helps with positioning issues on hover. I see hover issues a lot with jQuery scripts and browser hacks like CSS3 PIE — if you're using those, try removing them.
Try setting the style="zoom:1" on the element.
I am not sure but looking at
<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>
from what I can see is that there is no table width on this, so IE does not know how to scale the td appropriately.
Another guess is because you're are declaring width as 100% on the first one IE interprets this to shove it off. Which is my guess, you can not have a width of 100% on the first cell because it means to take up 100% of the full table width.
clear you browser cache, specify a width and height on your image
i have seen the most weird stuff on ie7, like pagebreaks \n and such causing this effect, ie:
<a href="#>
<img src="jpg" />
</a>
to fix just put everything on the same line and without spaces (like your table with a space on the right)
also avoid using inline style, use a stylesheet (css)
I need to layout a html datatable with CSS.
The actual content of the table can differ, but there is always one main column and 2 or more other columns. I'd like to make the main column take up as MUCH width as possible, regardless of its contents, while the other columns take up as little width as possible. I can't specify exact widths for any of the columns because their contents can change.
How can I do this using a simple semantically valid html table and css only?
For example:
| Main column | Col 2 | Column 3 |
<------------------ fixed width in px ------------------->
<------- as wide as possible --------->
Thin as possible depending on contents: <-----> <-------->
Similar to Alexk's solution, but possibly a little easier to implement depending on your situation:
<table>
<tr>
<td>foo</td>
<td class="importantColumn">bar</td>
<td>woo</td>
<td>pah</td>
</tr>
</table>
.importantColumn{
width: 100%;
}
You might also want to apply white-space:nowrap to the cells if you want to avoid wrapping.
I'm far from being a CSS expert but this works for me (in IE, FF, Safari and Chrome):
td.zero_width {
width: 1%;
}
Then in your HTML:
<td class="zero_width">...</td>
I've not had success with width: 100%; as it seems that without a container div that has a fixed width this will not get the intended results. Instead I use something like the following and it seems to give me my best results.
.column-fill { min-width: 325px; }
This way it can get larger if it needs to, and it seems that the browser will give all the extra space to whichever column is set this way. Not sure if it works for everyone but did for me in chrome (haven't tried others)... worth a shot.