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/
Related
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.
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 markup looking something like this:
<html>
<head>
<style>
table.t_group {
border: 2px solid black;
margin: 0 auto 0 auto;
}
table.t_group > tbody > tr > td {
vertical-align: top;
}
</style>
</head>
<body>
<table class="t_group" style="width:500px">
<tbody>
<tr>
<td>
<img height="24" widht="24"/> First cell
</td>
<td>
Last cell
</td>
</tr>
</tbody>
</table>
</body>
</html>
The key problem is vertical alignment of text in cells with an image. For whatever reason, it is aligned to bottom, but I expect it to be aligned to top.
Why does it happen this way? How to align text in cells with images to top?
You image is not aligned properly using vertical-align therefore the text next to it is at the baseline of your image
Use:
table img{
vertical-align:top;
}
jsBin playground
https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
You’ll need to align the images as well – right now, image and text are sitting on one “line”, and with the image aligned to the baseline by default, this is the effect you’ll get.
img { vertical-align: top; }
This will fix it.
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>
I have a table which I don't want to have a width of less than 540 pixels, in this table I want a single column to fill the remaining width if the content is less than 540 pixels wide.
If I set this column to have width of 99% it works in Firefox, Safari and Chrome, but not in Internet Explorer (any version), where the table grows to the full page width.
I need this to work in IE7 and above.
edit:
added some code:
<div class="container">
<table class="my-table">
<tr>
<td class="first"><img src="my-img.png"></td>
<td class="expand">Some text here... should grow</td>
<td class="meta">short text</td>
<td class="end-col">final column</td>
</tr>
</table>
</div>
CSS:
.container {
min-width: 540px;
display: inline-block;
}
.expand {
width: 99%;
}
.first, .meta and .end-col should all shrink wrap to their respective contents.
This works in everything but Internet Explorer.