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>
Related
I want to remove the space there and make my images looks nice, but I don't know how.
There is always space between the div and table. I tried collapse but it did not work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
width: 600px;
height: 150px;
border: 1px solid black;
margin: auto;
background-image:url("images/piha1.jpg");
}
table tr td{
}
img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="div1">
<table>
<tr>
<td><img id="surfimg" src="images/piha2.jpg" alt="surf"></td>
<td><img id="picnic" src="images/piha3.jpg" alt="picnic"></td>
</tr>
</table>
</div>
</body>
</html>
Try using collapse on the table and reducing the padding from the td to zero:
table {
border-collapse: collapse;
}
td {
padding: 0;
}
Try to add border-collapse: collapse; as CSS property for table element.
table {
border-collapse: collapse;
}
Alternatively, you can experiment with following attributes
cellpadding="0" cellspacing="0" and border="0" on your table.
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.
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.
Using the suggestions of this fiddle I made a scrolling table with fixed headers:
<!DOCTYPE html>
<html lang='en' dir='ltr'>
<head>
<meta charset='UTF-8' />
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 2em;
background: #808;
}
#container {
overflow-y: auto;
height: 200px;
padding-top: 1em;
}
table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
th {
height: 10px;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
background: #0f0;
border: 2px solid #f0f;
white-space: nowrap;
}
th > div {
position: absolute;
background: #ff0;
color: #00f;
padding: 1em;
top: 0;
margin-left: auto;
line-height: normal;
border: 3px solid #805;
opacity: 0.5;
}
td {
border-bottom: 3px solid #666;
background: #fdd;
color: #c0c;
padding: 1em;
}
td:first-child {
border-right: 1px solid #aaa;
font-family: serif;
text-align: center;
}
td:last-child {
border-left: 1px solid #aaa;
}
</style>
<title>test</title>
</head>
<body>
<div>
<section>
<div id='container'>
<table>
<thead>
<tr class='header'>
<th>
head 100
<div id='h1'>head 1</div>
</th>
<th>
head 2
<div id='h2'>head 2</div>
</th>
<th>
head last
<div id='hL'>head last</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aardvark</td>
<td>beta<br />longer text<br />spanning on some lines</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta<br />long text</td>
<td>omega and something else</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega just to finish</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</body>
</html>
The scrolling works smoothly, as you can test on https://jsfiddle.net/Marco_Bernardini/h8ukwf3w/4/ but it has an aesthetic issue: the header of the columns are not centered.
The TH height will be set to 0 and its borders will be removed: now it has an ugly color just to see it during the debug phase.
I tested many solutions, and some of them are commented away in the fiddle:
with width: -moz-available; every header starts at the correct position, but all of them end at the right side of the table; I added the opacity: 0.5; so this behavior can be clearly seen
with width: 100%; the DIV takes the width of the whole table, not of the parent TH
with width: inherit; nothing happens (the DIV inside the TH don't inherit the TH width)
the margin-left: auto; margin-right: auto; trick doesn't give a result
Even using two nested DIV inside the TH is not a solution, since at least the outer one must fill the TH, which is not the case.
The number of columns is not determined a priori, because the table will receive data from a database, and it's up to users to decide which columns will be shown. This also prevents me to use fixed widths.
How can I center that DIV inside the TH width?
Short answer: you can't.
Your divs are positioned absolutely which removes them from the regular flow of the document, hence the width of the parent can have no effect.
You could center them if the divs were absolute in relation to their parent... however, you cannot set your parent's position to relative, because the divs will then appear inside of the #container element which has its overflow hidden. If you nudge them up to where they should be, they will no longer be visible. Not to mention that you would not be able to fix them to the top.
I can think of no good way of doing this using only CSS, especially if the number and width of columns is not fixed.
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