I have a table that is of a responsive height and would like the image within it to fit the height of the td, but instead it overflows to the image source height, I have spent hours on this and no luck yet. The basic test case:
<table style='height:50%;width:50%;'>
<tr>
<td>
<img style='height:100%;' src='https://placehold.it/192x1200'>
</td>
</tr>
<tr>
<td>
bob
</td>
</tr>
</table>
use position relative to the parent of the image [ td ] and will apply your dimensions by precentage.
Related
I have a component that is made of some divs with a text inside. It's using overflow-wrap: break-word property for the text to fit:
This is how it looks like on PC screens
But as soon as i shrink screen width, words break and only some of the divs changes its height: This is how it looks like on small screens
HTML markup is here
The question is how do i make all the divs to change size in this case?
Hi i suggest to use a table for that
<table style="width:100%">
<tr>
<td>
{firstname} {lastname}
</td>
<td>
{card}
</td>
<td>
{payed}
</td>
<td>
PDF
</td>
</tr>
</table>
Currently trying to align an image to the bottom of it's table. At present it reverts to the top naturally. I've tried everything but the image still sits to the top of the table.
</table>
<td class="logo-label">
<table>
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" height="36" width="113">
</td>
</table>
I know it will be something simple but at the moment I cannot get my head around why the image isn't moving.
First of all, the HTML structure is completely wrong. <td> and </td> are table cells, so they lie between <tr> and </tr> (table rows). <tr> and </tr> lie in between <table> and </table> (the table itself). The structure of a table is shown below:
<table>
<tr>
<td>Cell contents here</td>
</tr>
</table>
You can have as many <tr>s and <td>s as you wish.
A table by default has no width. Put in another way, its width is set to auto, i.e. it takes the width of its contents. Set the width and height attributes to avoid this. A table also has no borders by default. Set border="1" to make the borders visible.
To align an image to the bottom of its parent element (<td> in this case), one way to do it is to set position:relative for the parent element and set position:absolute for the child element. Then, set bottom:0 for the child element. The image will then be aligned to the bottom of the element. The snippet below sums up the whole process.
<table border="1" width="500" height="300">
<tr>
<td style="position: relative">
<img style="position:absolute; bottom:0" src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
There may also be some rules in your logo-label CSS rule, which we don't know about.
First of all, that is a real mess you have. Secondly, you need to look at your CSS file and look up what "logo-label" is doing. That is controlling the alignment of the image.
<table>
<tr>
<td class="logo-label">
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
I want to create a div, which the width and height are exactly equal to height of 1 character, and the width as well as height should be responsive: if I change the font size, the width and height would also change. I tried :
<table border="1" style="position:relative;">
<tr>
<td style="font-size:144px"> 
<div style="position:absolute;top:0%;left:0%;background-color:red;width:100%;padding-bottom:100%;"/>
</td>
</tr>
</table>
which the side of red square equals to width of " " automaticlly. But I want it be equal to height of " ", I tried:
<table border="1" style="position:relative;">
<tr>
<td style="font-size:144px"> 
<div style="position:absolute;top:0%;left:0%;background-color:red;height:100%;padding-right:100%;"></div>
</td>
</tr>
</table>
which just replace "width" with "height" and "padding-bottom" with "padding-right",but seems not working, is there any way to do this?
I have dynamic text content inside all first tds. So the trs and tds get expanded automatically. Now for all second tds there is div with background image and dont have any text inside. I need this divs with background image to be expanded or collapsed automatically along with the cells in table so that the red image will span over the height of each cell. Any way to do this purely with css as I dont want to introduce script here? jsfiddle
<table border="1">
<tr>
<td>
This content makes the trs and tds to expand/contract horizontally automatically
</td>
<td>
<div class="img"></div>
</td>
</tr>
<tr>
<td>
xyz
</td>
<td>
All divs inside second tds should get expanded automatically which is not happening
</td>
</tr>
</table>
CSS
td
{
width:200px
}
.img{
width:30px;
height:40px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;}
Just set background for that td with 100% width and height.
Fiddle: http://jsfiddle.net/mttSA/
.empty{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;
background-size: 100% 100%;
}
HTML:
<td class="empty">
</td>
<table>
<tr>
<td>
<img src="/me/images/register.jpg" width="680" height="290">
</td>
</tr>
</table>
how can i show text and lables on this image?
Have your image as a background on either the td, tr or table. If image is not 100% height and width, use background-position to position your image where you want it. Then just use html as you would in the table.
Like this: http://jsfiddle.net/zPm2R/