I have a <table> with table-layout set to fixed, so that all explicit width/height definitions are respected no matter what. I'm trying to get a certain <td> to overflow, but even though I did the table-layout: fixed it doesn't work.
What should I do to make it work?
It won't work because the <td> will always have the size of an image
You can use height and width attributes. If the image size is 400x300, typing <img src="..." height="100" width="100" /> will show 100x100 image
If you want to crop an image use
<style>
#id{
background:url(...) no-repeat; /* you can use background-position css property here... */
height:100px;
width:100px;
</style>
<div id="image"></div>
Using table-layout: fixed, you can only guarantee the column widths, not heights. Also, the content of cells has no bearing on those widths. From w3schools:
The horizontal layout only depends on
the table's width and the width of the
columns, not the contents of the cells.
How much control do you need over the individual cells? Are you going for hidden overflow or one that can scroll? It's not clear from your question.
Related
I am trying to put text over an image. Something like this (i have changed the background image for propriety reasons)
The tool/app i am working with has following limitations -
Using negative margins don't work
Using position:absolute and position:relative don't work
fancy stuff like grid and flexbox also dont work
I know i know. You all are thinking "what the heck is it?". But if any one of you used salesforce visualforce email templates, you will know what i am talking about.
So i need to implement it without them. I want the image to retain its aspect ratio as i compress and expand browser window.
When i use background image html tag, i notice that background image does not maintain it's aspect ratio. In full screen mode, it stretches horizontally (actual image i am using has drawing of animated characters in it, which visible look horizontally stretched out)
<div style="color:white; background-image: url('images\background.png');max-width: 100%;height: auto;overflow: hidden;background-size: 100% 100%;">
But when i use an img tag, image fits the full screen nicely, and maintains its aspect ratio when i change browser window size
<img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto">
So i figured i need to come up with a solution without using background image (or negative margin or position:relative) and somehow get text on it.
I read a post where a guy suggested a hack using tables -
How to put text over an image without absolute positioning or setting the image as backbround
It seems to work to an extend. I need help fixing it. Here is the final code i have-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<table>
<tr>
<td></td>
<td rowspan=2 colspan=2><img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto"></td>
</tr>
<tr>
<td rowspan=2 colspan=2><h1 style="margin-top: 5rem;padding-bottom: 25rem; text-align: center; color:white">Thank you for submitting feedback</h1></td>
</tr>
</table>
</div>
</body>
</html>
Issue i am facing is if i compress browser window too much, the text float above the blue image, as shown below
Any help would be appreciated. Both text and image are part of table. Is there a way to make sure they stay within table boundaries, so they stay overlapped?
You need to align the image on the top in <td> element, because its default is middle. That is why it is being aligned that way and giving space above and below.
So, add vertical-align: top to <td> element.
td {
vertical-align: top;
}
I currently have a table, with cells containing text. They are all at a current height of 100, but I want them to scale with browser size, so the page always fits on screen without the user scrolling.
<td width="200" height="100">
<h1 align="center"> <font color="AEDBFB">Blue</font></h1>
</td>
What can I put in place of the "100" to make it say 10% of the screens height?
One suggestion could be to use a combination of the CSS function calc and the CSS unit vh for viewport height:
<style>
td {
height: calc(100vh / 10);
}
</style>
I'm attempting to make an image take all the remaining width available for a table and span the entire height of a table without extending it any further, with overflow:auto to scroll if there's not enough height.
The width bit is easy, but no matter what I do the table cell containing the image will extend the height of the table. Is there a way to prevent this, short of explicitly setting the image's height?
Thus far the solutions I've found differ on browser, so aren't ideal. You could render different markup based on the client. (But still looking for a more universal answer.)
Updated again for the most universal solution so far:
<style>
div.ImageBlock
{
height:100%;
width:100%;
left:0px;
top:0px;
overflow:auto;
}
div.IE_CompatMode
{
position:absolute;
}
</style>
Either works in Chrome, and the IE_CompatMode has to be added when IE has compatibility mode On.
<td rowspan="2" style="position:relative;">
<div class="ImageBlock [conditional:]IE_CompatMode">
<img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" />
</div>
</td>
And nothing (that I've yet tried) works in Firefox.
You would have to use a wrapper element around the content to restrict the height.
<table>
<tr>
<td><div class="overflow">This is short.</div></td>
<td><div class="overflow">This is longer.</div></td>
<td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>
</tr>
</table>
.overflow {
max-height:40px;
overflow:hidden;
}
var tableHeight = $('table').height();
$('.overflow').css('height',tableHeight + 'px');
Could always give the image a percentage e.g. height="100%" that should make it the full size of the cell that it is in but would restrict overflow.
i want a table to render with minimum width according to its content, but IE7 insists on expanding it to 100% width.
The following little snippet works fine in Firefox and IE8, but not in IE7:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table { table-layout: fixed }
td { padding: 0 10px; border: 1px solid blue;}
</style>
</head>
<body>
<table>
<tr>
<td>Column with variable width</td>
<td style="width: 100px;">Column 2</td>
<td style="width: 100px;">Column 3</td>
</tr>
</table>
</body>
</html>
I have a table with table-layout: fixed.
I have specified the width of all cells except the first one.
In the first column, i want the browser to determine the width based on the content
As I don't know the width of the first column, I cannot (and do not want to) specify the width of the table.
Now, the problem in IE7 is that the table is rendered to 100% width. So the first col has not the minimum width that is required to display its content but takes up all the space to make the table 100% width.
Here is what i found out so far:
when i remove "table-layout: fixed" from the table, the table will not expand to 100%. Unfortunatly, that's not an option for me.
when i set the table-width to a very small size (like e.g. 10px), the first col will not be expanded to the minimum required width, but will disappear entirerly.
i tried to set "display: inline;" for the table, but that has no effects on the width.
Any ideas?
Thanks in advace,
Pitter
If only purpose of table-layout: fixed is to fix widths of cells, then you can add DIVs with desired width inside TD and get rid of table-layout: fixed for table.
The CSS specification on table-layout: fixed:
With this (fast) algorithm, the horizontal layout of the table does
not depend on the contents of the cells; it only depends on the
table's width, the width of the columns, and borders or cell spacing.
So you should definitely try to achieve whatever you need table-layout: fixed for by some other means.
I have a HTML table, I would like to show an image as the content of a <td> element, and make the image occupy the whole <td> content area, so, I did the following thing:
<td id="my-img">
<img border="0" src="images/my.png" alt="Logo" width="60px"/>
</td>
I also used CSS to define the width of <td> which has the same width value as the <image> tag:
#my-img{
width: 60px;
}
But, the image does not occupy the whole <td> area, there are white spaces around the image always, why? how to get rid of it? (I am sure the white spaces are not from the PNG image file)
Try what Nick Brunt wrote, but also include the following for the css for the image:
margin: 0px;
Two things:
Firstly, when defining width as an attribute of an html tag, you don't need the px, just width="60" will do.
Secondly, the spaces around the image are probably caused by padding around the table cell. Add this CSS:
#my-img{
width: 60px;
padding: 0px;
}
As a side note, simply changing the width of the picture will cause it to stretch, you need to make sure you change the height as well otherwise the aspect ratio will be off.
Table cells have padding on them by default, which pushes the content in from the border.
You can either do:
<table cellpadding="0">
or you can do
<td style="padding: 0">
Depending on if you want to apply the zero padding to all table cells or just that specific table cell.
Also, providing the entire table in your question might allow us to help you further.
Try a different doctype for your html document:
http://www.w3schools.com/tags/tag_doctype.asp
XHTML sometimes solves similar problems.
If this doesn't help, consider using my.png as a background with background-repeat: no-repeat css style.
#my-img{
width: 60px;
background: no-repeat url(images/my.png);
}