If I have HTML like this:
<table>
<tr>
<td>
<img src="a.png">
</td>
<td>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
</td>
</tr>
</table>
The second column can have a variable number of paragraphs, so the height will be different. Whatever height the row is, I want the image to be that height. I tried this:
img {
height: 100%;
}
but it didn't seem to do anything. I would like to avoid changing the HTML if possible, can I do this with only CSS?
So the reason I wanted to increase the height of the image, was because the
second column can be much larger, which pushes the image way down with the
default table vertical centering. Instead of focusing on the image size, I
instead just moved the image to the top:
td {
vertical-align: top;
}
If someone has a solution to the original question I am still interested, but
this should do as a workaround.
Related
I am trying to put a red rectangle icon followed by some text within a HTML Table cell and I am getting very strange behavior here. I am using just a DIV to draw the red rectangle as shown in the example here. I want the height of rectangle to be the height of the cell so I set the height: 100%
https://jsfiddle.net/pm43k26w/1/
<table border="1">
<td>
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
The solution kind of works in Chrome but not in FireFox. FireFox just shows a blank space. It appears it does not like it when I set the height to 100% Can anyone explain why? What's the best way to accomplish this if DIV isn't the right way to go for the rectangle?
Thanks.
Firefox needs content in the div. The following modification will do. The numerical entity is Unicode's 'zero width space character'. A non-breaking space ( ) will do as well, of course.
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
See this fiddle.
Try setting the height of the parent element.
<td style="height:20px">
That should help with the Firefox problem.
Edit: JSFiddle:
https://jsfiddle.net/prove64m/
First of all you forgot the <tr> tag.
So this should be the correct HTML:
<table>
<tr>
<td>
<div></div> first text
</td>
<td>
<div></div> second text
</td>
</tr>
</table>
Then the CSS part:
table {
border:1px solid;
}
td {
height:40px;
}
div {
display:inline-block;
vertical-align:bottom;
width:10px;
height:100%;
background:red
}
Pay attention that the height is ALWAYS evaluated, so, if there isn't any explicitily set, there is nothing "to compute"; we did this here:
td {
height:40px;
}
Other important thing; i guess you would like to control the position of the text after the <div> element; this is possible with online-block elements in this way:
div {
...
vertical-align:bottom;
...
}
Other possible values are: middle, top,...
here the Fiddle: https://jsfiddle.net/pm43k26w/5/
Firstly, you need to understand the problem here. CSS Properties such as height are "Computed". In this particular case, the computed height of the first div (let's call it unseenForce, shall we?) is 0 while its cousin, aptly named seenForce is 10px. See this below :
http://jsfiddle.net/gvo4kf41/
$(document).ready(function() {
$('.Info').html('The computed height of the unseenForce is ' + $('#unseenForce').height() + 'px <br />');
$('.Info').append(document.createTextNode('The computed height of the seenForce is '+ $('#seenForce').height() + 'px'));
});
.Info {
color: red;
margin-top : 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
This is because none of the ancestors of the unseenForce have a specific height to them. Hence, Firefox is unable to attach a height to it.
What you need to do it force the Computed value of height to be greater that 0. There are many ways to do it and all the answers here show you different ways of doing it. Choose the one which suits your needs.
Here's the way I would do it. Just add height to the row (<td>).
table td {
height: 10px;
}
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
Hope this helps!!!
I want to change the size of my table cell to be smaller in height. The first cell has an image of 300px width. I'd like the second cell to have a height of 100px. I've tried html solutions like <td height="10"> but that hasn't worked. What I'm looking to do is have an image on the left and a text block on the right.
<table>
<tr>
<td> <img id="plattOverlook" src="images/Scenic/plattOverlook.jpg"/> </td>
<td style="background: white"> This is an overlook. </td>
</tr>
</table>
In a simple table adjacent table data cells will always be the same height unless you use
rowspan=*
Have a look at this page (about half way down) -
http://www.htmlcodetutorial.com/tables/_TD_COLSPAN.html
You will have to use rowspan for the image.
Other wise I don't think there's any possible solution
Use rowspan.
Check this fiddle:
http://jsfiddle.net/10z7ya28/
td {
width: 100px;
height: 50px;
}
Imagine you have a complex structure with 2 elements in a table cell. Just like that:
<table>
<tbody>
<tr>
<td>
<div class="wideDiv">Here goes some very wide content</div>
<div class="anotherDiv">This content doesn't have to be wide.</div>
</td>
</tr>
</tbody>
</table>
.wideDiv has content that may be wider than the page itself. In this case it forces .anotherDiv to get all this space too. I'd want to force .wideDiv to be not wider than the page itself (using scroll, of course), it works this way if we don't wrap divs with table. Fixed size is an obvious solution, but is there any other way?
Here's working example:
http://jsfiddle.net/GbEvT/2/
Add
.anotherDiv {
width: 100vw;
}
Here's the update: http://jsfiddle.net/GbEvT/4/
It tells anotherDiv to take 100% of the screen, not more.
Here, you have another solution:
table {
width: 100%;
table-layout: fixed;
}
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);
}
I wonder why IE doesn't seem to recognize the width I specify?
Basically I have this code:
<table>
<tr>
<td valign="top" align="right" class="left_frame"></td>
</tr>
</table>
CSS:
.left_frame {
background: url(images/side.gif) repeat-y;
width: 17px;
}
Even if I add width="17" inside the <td></td> tags, the width still doesn't change. This is quite frustrating because the problem seems to be very simple.
I'd say it's because there's no content in your <td>
Try adding a in there so the cell has some content, and see how that goes.
Alternatively, placing a height on the cell may work as well, depending on your requirements.
Basically the cell is a flat line at the moment, and needs something to tell it how tall it is, in order to draw the background in.
Example: http://jsfiddle.net/MvBf5/