Please run the very simple snippet below.
You can see that spaces on top doesn't equal to spaces on bottom.
How to fix it?
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td style="height: 20px; border: 1px solid black">
<img style="height:10px; width:10px; vertical-align: middle; border: 1px solid red;"></image>
</td>
</tr>
</table>
</body>
</html>
EDIT: #James provided a solution that change TD display to flex. Beside this, anyone knows why 'vertical-align' doesn't work in this simple case?
Try assign it to its parent element will work.
A little off-topic suggestion, maybe not use too many inline style, they are too messy.
td{
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td style="height: 20px; vertical-align: middle;border: 1px solid black">
<img style="height:10px; width:10px; border: 1px solid red;"></image>
</td>
</tr>
</table>
</body>
</html>
#James provided a solution that change TD display to flex. Beside this, anyone knows why 'vertical-align' doesn't work in this simple case?
This appears to be associated with an img element being a replaced element.
If we make that element a div instead then it aligns in the vertical direction centrally:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td style="height: 20px; border: 1px solid black">
<div style="height:10px; width:10px; vertical-align: middle; border: 1px solid red;"></div>
</td>
</tr>
</table>
</body>
</html>
If we give the img display: block it also aligns vertically in the middle:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td style="height: 20px; border: 1px solid black">
<img style="display: block; height:10px; width:10px; vertical-align: middle; border: 1px solid red;">
</td>
</tr>
</table>
</body>
</html>
Hmm, a workaround but not a complete explanation as I confess to not understanding non block elements fully.
Related
I'm trying to put two images side by side in a table and have the following behavior on the first image:
Have it be right up against the bottom of the table, so the bottom border is overlapping with the bottom border of the table.
Have no right margin or padding, so it is right against the second image (so the right border of the first image is overlapping with the left border of the second image).
To solve the first thing I'm using valign="bottom" but that doesn't seem to fully work.
To solve the second issue I'm using padding-right:0px; margin-right:0px; but that doesn't work either.
Can anyone help me achieve the behavior I'm going for please? Note that I'm using a table because I have other things in this table, I just took them out to simplify the question.
table {
border: 1px solid black;
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg > img {
border: 1px solid red;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg" valign="bottom">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V"></img>
<td>
<td valign="bottom">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg"></img>
<td>
</tr>
</table>
Below you can see two tricks that should work for you. In first I've made td to be display: flex with two alignments. ;). In second I used inside div element with flex, so to not change default display: table-cell for td element. I've also fixed typos in tags you used.
table {
border: 1px solid black;
}
.benderImg {
display: flex;
align-items: flex-end;
justify-content: flex-end;
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg>img {
border: 1px solid red;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
</td>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
</td>
</tr>
</table>
table {
border: 1px solid black;
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg>div>img {
border: 1px solid red;
}
.benderImg > div {
display: flex;
align-items: flex-end;
justify-content: flex-end;
height: 100%;
width: 100%;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
</div>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
</td>
</tr>
</table>
First, you are using obsolete attributes, which is not recommended. Besides, some of the attributes try to set different values than the properties in the CSS, which is a no-no. Replace them all with CSS properties.
Secondly, the vertical align property should be on the img rather than on the td.
Then the distance between the two images; the second image has no border or margin, and neither does its td, so I'm not sure why you think there should be some spacing in between. I put a left padding on the td; you can change that to fit your needs.
And finally, </img> is unnecessary; not allowed even, since <img> is a void element. You can end the <img> tag with a slash if you want.
table {
border: 1px solid black;
width: 666px; /* css replacement for width attr */
border-spacing:0; /* css replacement for cellspacing attr */
}
td {
padding:0; /* css replacement for cellpadding attr */
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg > img {
border: 1px solid red;
vertical-align:bottom;
}
.benderImg + td {
padding-left:5px;
}
<table>
<tr>
<td class="benderImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" alt="" />
<td>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" alt="">
<td>
</tr>
</table>
For the second issue, I fixed it by just using align="right" on the first image's td. The first issue was fixed with a vertical-align: bottom on the first image.
Width property isn't working here:
<!DOCTYPE html>
<html>
<head>
<style>
td {
height: 50px;
width: 25px;
border: 1px dashed blue
}
table {
border: 1px solid black;
width: 400px;
height: 400px
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Table cells don't want to become narrow. Why? Also, it seems that there is something wrong with height property too.
It's because the table is set at 400px width. The cells you have will auto expand to fill the width of the table. Remove the 400px width of the table and your cells should become 25px each.
As HaukurHaf mentioned, the <td> are expanding automatically expanding to fill the <tr> .
You can force the <td> to accept the specified width and height by changing it's display property to inline-block.
JSFiddle
Your table styles are overriding your td styles.
To see what I mean:
<!DOCTYPE html>
<html>
<head>
<style>
td {
height: 50px;
width: 25px;
border: 1px dashed blue
}
table {
border: 1px solid black;
/*width: 400px;
height: 400px;*/
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
and here's a working JSfiddle
I am trying to layout a couple of div's inline and want to give them a fixed width. I currently have:
<style>
.af-header{
border: 1px solid black;
}
.menu-item-header{
border: 1px solid blue;
width: 200px;
}
.menu-item-detail{
border:1px solid orange;
width: 400px;
}
.menu-item{
border: 1px solid red;
}
</style>
<table class='af-header'>
<tr>
<td width=800>
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</td>
</tr>
<tr>
</tr>
</table>
The problem that I'm having is that the menu-item-header and menu-item-detail collapse down to fit the text like in the following screenshot:
How do I fix the width in these two so that the width is respected?
Use display: inline-block not display: inline.
Use display:inline-block for your div elements to put them in line
.af-header div
{
display:inline-block;
}
Js Fiddle Demo
I'm not sure why are you using table here, if it only to take the advantage of column effect then you don't need to use it. You can use just div to achieve the same
<div class="af-header">
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</div>
Js Fiddle without table
Following HTML renders incorrectly with latest Firefox. IE and Chrome are ok but Firefox displays white vertical line inside the table cell.
Example rendered with Firefox 21 can be found here:
http://tinypic.com/r/2w2qvb6/5
Is this a bug in Firefox or am I missing something?
HTML:
<table>
<tbody>
<tr>
<td>
<div></div>
</td>
</tr>
</tbody>
</table>
CSS:
table{
border: 2px solid red;
border-collapse: collapse;
}
td{
border: 2px solid red;
padding: 0px;
}
div{
background:blue;
height: 100px;
width: 100px;
}
Removing border-collapse: collapse; removes the vertical white line. But I really want to collapse the table borders.
JSfiddle: http://jsfiddle.net/FeuBx/
Update: The problem appears only with 100% browser zoom level (Ctrl + 0).
Your code works as is if you set an HTML5 DOCTYPE at the top of your page as in:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
border: 2px solid red;
border-collapse: collapse;
}
td{
border: 2px solid red;
padding: 0px;
}
div{
background:blue;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<div></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Can someone explain why the two table layouts below aren't the same (specifically, why the second 'table-cell' div doesn't stretch to take up the rest of the width of the 'table' parent div, as it does in the real table)?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div style="width: 100%; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>
<table style="width: 100%; border: 1px solid black; border-spacing: 0;">
<tr>
<td style="width: 20px; border: 1px solid red;">.</td>
<td style="border: 1px solid red;">.</td>
<td style="width: 20px; border: 1px solid red;">.</td>
</tr>
</table>
</body>
</html>
Edit: turns out you get some unexpected behaviour if you try and style an image as a table-cell:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css"><![CDATA[
* {border: 1px solid black;}
table, .table, .row {
width: 100%;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
img {
height: 21px;
width: 21px;
}
]]></style>
</head>
<body>
<div class="table">
<div class="row">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
<div class="cell">
</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
</div>
</div>
</body>
</html>
The 2nd cell-styled div doesn't stretch all the way horizontally to fill the rest of the table width. If you add content to it, it gradually does though. Weird.
Unless the a table-cell element's parent is a table-row element (and its parent element is a table element) or table element, anonymous table and table-row elements are inserted for you. Anonymous elements cannot be styled.
If you want your table-cell elements to take up the entire available width, you need to make an explicit table element to contain them for styling purposes.
http://tinker.io/29b92
<div style="width: 100%; display: table; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>
Turns out the answer was 'images don't reliably style as table-cells', but I mis-simplified my initial test case. Thanks all!
You should work with tables inside other tables if you want one of your rows to expand to the same width.
Also, if your parent table is 100%, your child table can't be 100% as well, have you tried 98%?
Style your HTML in and external CSS file to prevent repeating your clause every line.
If that doesn't work, let me know and i will keep looking for more options you can try.