I have a table cell of unknown height which contains an img. This img has a fixed pixel width, but I need it to stretch to fill (but not exceed) the entire height of the table cell. The width should remain the same no matter what the height.
Usually, I'd do this using height: 100%, but this doesn't appear to be working in this scenario:
img {
display: block;
width: 25px;
height: 100%;
}
<table>
<tr>
<td>
Here is some content.<br/>
I would like the adjacent image to stretch to be<br/>
the same height as it, but not have the image get<br/>
any wider.
</td>
<td>
<img src="https://placehold.it/20x20" />
</td>
</tr>
</table>
How can I make the image fill the height of its cell?
Consider the image as background and you can easily achieve this. You can also keep the background-image as an inline style to be able to set it like an img element
.img {
width: 25px;
background-size:100% 100%;
}
<table>
<tr>
<td>
Here is some content.<br/>
I would like the adjacent image to stretch to be<br/>
the same height as it, but not have the image get<br/>
any wider.
</td>
<td class="img" style="background-image:url(https://placehold.it/20x20)">
</td>
</tr>
</table>
In case you want to keep the use of img you can use position:absolute
.img {
width: 25px;
position:relative;
}
.img img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<table>
<tr>
<td>
Here is some content.<br/>
I would like the adjacent image to stretch to be<br/>
the same height as it, but not have the image get<br/>
any wider.
</td>
<td class="img">
<img src="https://placehold.it/20x20)"/>
</td>
</tr>
</table>
With email clients such as Outlook desktop 2007-2019, you need to specify the width of the image, especially if you are displaying it in a size that does not match it's physical size. Otherwise Outlook will ignore your style sheet and revert to the actual size.
For the height, you can generally leave it blank and add in the style sheet height: auto;
<img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">
Good luck.
Related
for example, I want an image next to textfield, and I want the height of textfield follows the height of image, I tried:
<table>
<tr style="height:auto;">
<td style="height:100%;">
<input style="height:100%;"/>
</td>
<td>
<img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/>
</td>
</tr>
</table>
which I use avatar as sample image here, and I want the height of textfield
would change automatically when I change another image which has different height.
I think the html code above is not simple, and I don't want to use table element to do that, is there any simpler way to do this?
Here is an example, assuming I understand your question:
HTML:
<div>
<input>
<img
src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?
s=96&d=identicon&r=PG&f=1"/>
</div>
CSS:
input
{
height: 90px;
float: left;
}
div
{
float:left;
}
img
{
float: left;
margin-left: 10px;
}
and here is a fiddle: http://jsfiddle.net/8t146hsg/7/
I have a table with 1 row and 2 columns. The left cell contains an image, the height of which is given in em (em is defined as 2vh, so everything will adjust according to the viewport height). The right cell contains some text.
<html>
<head>
<style>
body{
font-size:2vh;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="some.jpg" style="height: 18em">
</td>
<td>
Some text, more text, even more text.
</td>
</tr>
</table>
</body>
</html>
Now in Firefox and Internet Explorer the image shows with the proper ratio of width and height, and the text in the right cell is wrapped to the remaining width. But in Chrome and Opera it seems that the right cell adjusts its width to the text and the width of the image in the left cell is reduced to fit into the remaining space. So the question is: How can I force the left cell to adjust its width to the calculated width of the image? (The height/width ratio of the image is not always the same.)
The suggested answer addresses a different problem. It is about adjusting an image to the table cell. My problem is about adjusting the cell to the image.
Try this working fiddle, hope it will work
jsfiddle
CSS:
html. body, table {
margin: 0px;
padding: 0px;
}
table {
display: table;
width: 100%;
table-layout: fixed;
}
table tr {
display: table-row;
width: 100%;
}
table tr td {
display: table-cell;
width: 25%;
}
.imageTable {
float: left;
width: 100%;
}
.autoResizeImage {
max-width: 100%;
}
<div class="imageTable">
<table>
<tbody>
<tr>
<td>
<img class="autoResizeImage" src="http://www.hhacademy.org/computer-lcd-monitor-vector.jpg" />
</td>
<td>
<img class="autoResizeImage" src="http://gatelyacademy.org/wp-content/uploads/2014/10/computer-156513_640.png" />
</td>
<td>
<img class="autoResizeImage" src="http://i.dailymail.co.uk/i/pix/2013/01/07/article-2258276-16C8FB51000005DC-20_638x476.jpg" />
</td>
<td>
<img class="autoResizeImage" src="http://www.computer-repair-service.co.uk/wp-content/uploads/2013/08/mac-computer.png" />
</td>
</tr>
</tbody>
</table>
</div>
I solved this: The quirk is somewhere else. I had this somewhere in my CSS:
img{
max-width:100%
}
This is what caused the strange behavior in Opera and Chrome. If you're interested, check out this jsfiddle and compare the behavior in Opera and Chrome vs. Firefox and Internet Explorer: http://jsfiddle.net/martinvie/3moocskt/6/
I am trying to show some details of a receive in a table.
I want that table to have a min height to show the products. So if there is only one product, the table would have at least some white space at the end. In the other hand if there are 5 or more products, it won't have that empty space.
I have tried this CSS:
table,td,tr{
min-height:300px;
}
But it is not working.
height for td works like min-height:
td {
height: 100px;
}
instead of
td {
min-height: 100px;
}
Table cells will grow when the content does not fit.
https://jsfiddle.net/qz70zps4/
It's not a nice solution, but try it like this:
<table>
<tr>
<td>
<div>Lorem</div>
</td>
</tr>
<tr>
<td>
<div>Ipsum</div>
</td>
</tr>
</table>
and set the divs to the min-height:
div {
min-height: 300px;
}
The solution without div is used a pseudo element like ::after into first td in row with min-height. Save your HTML clean.
table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables,
inline tables, table cells, table rows, and row groups is undefined.
So try wrapping the content in a div, and give the div a min-height
jsFiddle here
<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
<tbody>
<tr>
<td>
<div style="min-height: 100px; background-color: #ccc">
Hello World !
</div>
</td>
<td>
<div style="min-height: 100px; background-color: #f00">
Good Morning !
</div>
</td>
</tr>
</tbody>
</table>
if you set style="height:100px;" on a td if the td has content that grows the cell more than that, it will do so no need for min height on a td.
Tables and table cells don't use the min-height property, setting their height will be the min-height as tables will expand if the content stretches them.
Setting height on table cells only works correctly, if your td is not using box-sizing: border-box. With border-box it will stay the height you set and content will overflow.
Use content-boxor something else.
I ran into this problem because I used a css-resetter.
Simply use the css entry of min-height to one of the cells of your table row. Works on old browsers too.
.rowNumberColumn {
background-color: #e6e6e6;
min-height: 22;
}
<table width="100%" cellspacing="0" class="htmlgrid-table">
<tr id="tr_0">
<td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
<td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>
How to force images to overflow in table cells without expanding the cells?
EDIT:
Sorry, I'll provide some more information. This is the table:
<table class="content">
<col width="200px" />
<col width="560px" />
<col width="200px" />
<tr>
<td colspan="3" class="logo"></td>
</tr>
</table>
CSS:
.logo
{
height: 120px;
background: url('img/wallpaper.png') center;
}
I thought there would be a simple solution...
If you use an <img> tag instead of a background image, you could remove it from document flow with position: absolute;
html
<td class="logo">
<img src="img/wallpaper.png">
</td>
css
.logo img {
position: absolute;
}
This will let the image overflow the cell, but creates other side-effects you would need to deal with. Update top or bottom accordingly to keep the image in place.
Adjusted css
.logo img {
position: absolute;
top: 15px;
}
Check out http://jsfiddle.net/QMNRp/1/
You're asking for an element's background to escape into the foreground. This isn't possible. An element's background can only be as large as the element itself.
To make the .logo image the same dimensions as the containing cell you could make use of the background-size property, but this isn't supported in older browsers.
Set Static Width to td's and set overflow to visible and text-wrap:nowrap; or word-break to keep all for text in tables
td{
width:100px;
max-width:100px;
overflow:visible
text-wrap:nowrap; //for text
word-break:keep-all; // for text
}
I have a div inside a td. The td has a height. How I can stretch the div vertically - without setting its height explicitely.
<td style='height:200px'>
<div>hello<div>
<td>
I tried setting the vertical-alignment but there is no "stretch" value.
Sample
http://jsfiddle.net/hnBNk/
HTML
<table>
<tr>
<td style='height:200px; border: 1px solid red;'>
<div style="border: 1px solid blue;">hello</div>
</td>
</tr>
</table>
CSS
div { /* This is a sample! Of course a class 'my_div' would make more sense */
height: 100%;
}
Try this:
td div {
height:100%
}
how about this?
<td style='height:200px'>
<div style="height:100%">hello<div>
<td>
OK, it is explicit definition, but it stretches according to parent element.
Try this:
<div style="min-height:100%">
It will automaticly stretch if the text needs more space (vertically)