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
}
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 am creating a mobile e-mail template (means no javascript) which has to be responsive.
I want to place several images inline, which are scaled down as the screen gets narrower. I did this by using css table and table-cell, and let the image scale. No problem so far.
However, since images are often blocked by e-mail clients, I was requested to create a kind of placeholder in grey, showing the image "alt text" when the image is not loaded. I want this placeholder to be of the same size as the contained image, and to scale at narrower widths too.
I got quite far, as you can see in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/
HTML:
<div class="table">
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
</div>
CSS:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
padding: 0 5px;
border: 1px dotted black;
}
.placeholder {
max-width: 120px;
max-height: 60px;
margin: auto;
background-color: #505050;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
However, there are two problems:
As the screen gets narrower and the images are scaled, the background-color pops out from under the image. The placeholder-div is scaling just as the image, but its height is calculated (by the browser) to be some 5px more then the image height. Where does that difference come from?
When the images are not loaded (try in the fiddle by just making the image URL invalid) then the placeholder-div's height collapses. How can I make it keep the correct height?
FYI: The actually used images won't always be of the same size, but I will know their dimensions and can calculate their aspect-ratio. I would write those values (like 120px) inline instead of in a separate css-file like in the example.
Thanks in advance for any help!
Add display: block to your CSS img rule to make it a block element instead of inline and you are good to go: Fiddle
Change src="...." of one of them to src="" in the fiddle and you will see the the cell itself already scales.
By adding rule img[alt] { font-size: 2vw; overflow: hidden } to your CSS, the html alt="text" will scale too. overflow: hidden chops excess text when alt is larger than your 120x60px.
(note: [alt] is called an 'attribute' in CSS, search for 'css custom attribute' should you want to learn to create your own.)
See updated Fiddle
I would advise against loosing the width and height rules of the placeholder, but you could change it to min-height/min-width to show at least that something 'is missing'. Or change to max-width: 100% and remove max-height, but this depends on your requirements. You will need to limit the size of an image somewhere up or down the line (for example giving the table a width in px and it's children a (max-)width in % ).
Remove:
img {
height: auto;
}
problem-1 & 2:
img {
max-width: 100%;
max-height: 100%;
}
I'm trying to fill the center cell of a table with a div element. For the purposes of illustrating the problem, the div is styled with a red background. It seems to work in Chrome, but not IE. In the fiddle below, IE is setting the height of the div to the minimum height necessary to contain its content. In tinkering around with this problem with different CSS settings, I managed to get IE to interpret "height: 100%"; as "the height of the browser window". However, as the question states, I want IE to interpret it as the height of the td cell. Any ideas?
http://jsfiddle.net/UBk79/
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body{
height: 100%;
}
#container{
height:100%;
width: 100%;
border-collapse:collapse;
}
#centerCell{
border: 1px solid black;
}
#main{
height: 100%;
background-color: red;
}
HTML:
<table id="container">
<tr id="topRow" height="1px">
<td id="headerCell" colspan="3">
TOP
</td>
</tr>
<tr id="middleRow">
<td id="leftCell" width="1px">
LEFT
</td>
<td id="centerCell">
<div id="main">CENTER</div>
</td>
<td id="rightCell" width="1px">
RIGHT
</td>
</tr>
<tr id="bottomRow" height="1px">
<td id="footerCell" colspan="3">
BOTTOM
</td>
</tr>
</table>
I did some more research on this and collected some info that might come in handy to others trying to solve similar problems. The CSS spec says the following three things that I think are important:
First, re: specifying the height (of a div) as a percentage:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
... a height of 'auto' won't fill the cell unless the content is taller than the cell's minimum height. But if we try to explicitly set the height of the containing cell or row, then we run into the following problem:
CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.
http://www.w3.org/TR/CSS21/tables.html#height-layout
Since the spec doesn't define it, I guess it's not too surprising that Chrome and IE choose to calculate it differently.
Alternatively, (as xec indirectly pointed out) trying to use relative positioning has the following spec problem:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
www.w3.org/TR/CSS21/visuren.html#propdef-position
So I've concluded there's probably not a pure CSS way to solve the problem that one can reasonably expect to work on most browsers.
At first, I thought, "Wow, the CSS spec is pretty shoddy and incomplete for leaving all this stuff undefined." As I thought about it more, though, I realized that defining the spec for these issues would a lot more complicated than it appears at first. After all, row/cell heights are calculated as a function of the heights of their content, and I want to make the height of my content a function of the row/cell height. Even though I have a well-defined, terminating algorithm for how I want it to work in my specific case, it's not clear that the algorithm would easily generalize to all the other cases that the spec would need to cover without getting into infinite loops.
Just set the table cell to: position:relative and the div to:
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
Edit 2017:
DEMO BELOW:
Note how you cannot see the red td because the yellow div covers it entirely...
#expandingDiv {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: yellow;
}
<table style="width: 120px">
<tr>
<td style="background: blue">blue td</td>
<td style="background: green">green td</td>
</tr>
<tr>
<td style="background: red; position: relative">
<div id='expandingDiv'> yellow div </div>
</td>
<td style="background: orange">
Some longer text which makes the bottom two tds expand dynamically.
</td>
</tr>
</table>
Although I liked Craig's answer and will not use the approach in this answer myself, I did get quite far with this jsFiddle.
It relies on a hack, however: Setting height: 1px on the table. It works in Chrome, FF, IE11 and Edge (all that I tested), but Chrome starts misbehaving in edge cases. See the fiddle. Here are the interesting bits:
table {
width: 100%;
/* Whý does this make it work? */
height: 1px;
}
td {
border: 10px solid blue;
height: 100%;
}
#container {
width: calc(100% - 20px);
height: calc(100% - 20px);
border: 10px solid black;
}
Too much of a hack-smell to me.
have you tried changing css to:
#centerCell{
border: 1px solid black;
height:100%;
}
seems to work for me on edge, firefox and chrome
Simply set the line height of the div; as long as its display is still a block level element. There is no need for relative or absolute positioning or hard coding of the height at the div level or any of its parents. Works in IE 8+, Firefox, and Chrome.
Example:
line-height: 50px;
// or
line-height: 2em;
Here's a jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/
CSS height: 100% only works if the element's parent has an explicitly defined height. This jQuery sets the table cell height in the first column.
<script type="text/javascript">
$(function(){
$('.myTable2 tr').each(function(){
var H1 = $(this).height(); // Get the row height
$(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to row height
});
});
</script>
I have a table with 3 columns and first and third column are divided by a vertical line for which i used table with with 100% height and background color which works in fine in FF but doesn't work in Chrome or IE.
Now i replace the table with div tag but empty div doesn't show up. Below is the sample code i tried so many thing now i am confused what to use. Need help from CSS Gurus.
.PageLine2V
{
width:2px;
content: "";
min-height: 100%;
background-color:#D1C094;
background-image:url('../images/gold-line-2v.gif');
background-repeat:repeat-y;
}
<table height="100%">
<td width="60px" valign="top" align="center" >
<div class="PageLine2V"></div>
</td>
</table>
I am not sure how i can make this empty div show up and grow with table height also
.PageLine2V
{
width:2px;
content: "";
min-height: 100%;
background-color:#D1C094;
background-image:url('../images/gold-line-2v.gif');
background-repeat:repeat-y;
height: 100%;
}
Give the div a height of 100%
Also add something in the div such as a space it won't render without content.
<table height="100%">
<td width="60px" valign="top" align="center" >
<div class="PageLine2V"> </div>
</td>
</table>
Setting height to 100% requires that the parent have an explicitly defined height. Add height: 100% to the td (the parent of the div). Tested and working with jsfiddle.
.PageLine2V
{
width:2px;
content: "";
min-height: 100%;
background-color:#D1C094;
background-image:url('../images/gold-line-2v.gif');
background-repeat:repeat-y;
height: 35px; /* As required */
display:inline-block;
}
Hope this will work. As I tried, I've used the same code with a fixed height in pixels and added display:inline-block;. Next you may try adjusting the parent height parameters for further positioning.
give it a position:absolute;
http://jsfiddle.net/eg6DP/
you can see it on the far left,and while you're at it give the table a position as well.