So I stumbled onto something that seems strange to me.
For example, the following code:
<html>
<table style="border-collapse:collapse;">
<tr>
<td align="center" colspan="8" style="border:3px solid black;">Title</td>
</tr>
<tr>
<td style="border:2px solid black; width:175px">Destination</td>
<td style="border:2px solid black;" colspan="2">STR</td>
<td></td>
<td style="border:2px solid black;" colspan="2">Order Date</td>
<td style="border:2px solid black;" colspan="2">24/jan/14</td>
</tr>
<tr>
<td style="border:2px solid black;">SV Truck nr</td>
<td style="border:2px solid black;" colspan="2">SV92566T/24JAN</td>
<td></td>
<td style="border:2px solid black;" colspan="2">Order time</td>
<td style="border:2px solid black;" colspan="2">18HO</td>
</tr>
<tr style="height:20px">
<td colspan="8" style="border:0"></td>
</tr>
</table>
</html>
Now, I would think that this would result in a nice table structure with an empty column without borders in the middle. As long as you wouldn't include that
<tr style="height:20px">
<td colspan="8" style="border:0"></td>
</tr>
it does, in fact.
So my question is why does this happen?
I'm telling the new row (which I would think has nothing to do with the previous one) that I don't want any border. But as long as I span that empty, borderless row across my 8 columns a border is added across the bottom of the previously borderless column of the previous row.
I know that I can fix this by not spanning my empty row and just leaving it as an empty <tr style="height:20px"></tr> but I would really like to just understand why this happens.
Also, I know that inline style is normally definitely not the way to go, but this is for an html company email, so I'm afraid I have no other option.
This solves the problem in Chrome:
<tr style="height:20px">
<td colspan="8" style="border:3px solid transparent"></td>
</tr>
Don't know why the border has to be at least 3px, but it works.
Fiddle
Related
I am trying to embed the html table in to email I am sending from one the application I am building below is what I am trying
<table width="400" style="border:1px solid #333">
<tr>
<th>Isolate Lots</th>
<th>Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td>$LOTS[$foreach.index].name </td>
<td>$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
The table in the email looks like this
How can I put everything in the Cell inside the table and align them.
After edit
Try to set style="vertical-align: middle" for each cell (since valign="middle" is obsolete).
<table style="border-collapse: collapse; width: 400px">
<tr>
<th style="border: 1px solid #333; vertical-align: middle">Isolate Lots</th>
<th style="border: 1px solid #333; vertical-align: middle">Identification</th>
</tr>
<tr>
<td style="border: 1px solid #333; vertical-align: middle">name</td>
<td style="border: 1px solid #333; vertical-align: middle">jax_trait_isolateIdentification</td>
</tr>
</table>
Upd: added borders
You did not specify what kind of alignment you mean, so here's my suggestion in case you want them centered, just added a 'align="center"' style to the cells.
<table width="400" style="border:1px solid #333">
<tr>
<th align="center">Isolate Lots</th>
<th align="center">Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td align="center">$LOTS[$foreach.index].name</td>
<td align="center">$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
well your code is correct maybe u should try this
i just change the style of your table
hope it works. enter code here
<table width="400" border='1px' style='text-align:center'>
<tr>
<th>Isolate Lots</th>
<th>Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td>$LOTS[$foreach.index].name </td>
<td>$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
In IE (version 11 and likely older versions), I get a small vertical and/or horizontal gaps (or lines) in the border when I am using a radius on a TD in a nested table. The same problem occurs if I used a radius on DIV nested in a table. If I use Zoom function in IE, the lines will appear or display depending on the Zoom level. There is no problem in Firefox nor Chrome. And I am using the nesting, because I need the background color near the radius to be different than the background color of the enclosing table.
Here is a screenshot of the white line error:
[![enter image description here][1]][1]
Here is sample code:
<table style="width:50%;" cellspacing="0">
<tr>
<td style="background-color:#292F6C;">
sadasd
</td>
</tr>
<tr>
<td style="background-color: white;padding: 0px;border:0px;">
<table style="border-spacing:0px;width:100%;height: 10px;">
<tr>
<td style="background-color:#292F6C;-webkit-border-bottom-left-radius: 11px;-moz-border-radius-bottomleft: 11px;border-bottom-left-radius: 11px;"></td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/f7e6qo1m/
Any suggestions?
Figured out that adding a 1px border on the square sides seems to fix the problem.
https://jsfiddle.net/f7e6qo1m/1/
<table style="width:50%;" cellspacing="0">
<tr>
<td style="background-color:#292F6C;">
sadasd
</td>
</tr>
<tr>
<td style="background-color: white;padding: 0px;border:0px;">
<table style="border-spacing:0px;width:100%;height: 10px;">
<tr>
<td style="background-color:#292F6C;-webkit-border-bottom-left-radius: 11px;-moz-border-radius-bottomleft: 11px;border-bottom-left-radius: 11px;border-top: 1px solid #292F6C;border-right: 1px solid #292F6C;"></td>
</tr>
</table>
</td>
</tr>
</table>
I'm trying to align two table's borders. Please take a look on this small example
http://jsfiddle.net/kf82J/2/
On Internet Explorer and Chrome, the right border is not aligned, but works on Firefox.
My goal is to be able to draw a line that "aligns" width the middle of the title, it's difficult to explain with words, just check the jsfiddle.
Same code below
<table style="width:100%;border-collapse: collapse;">
<tr style="height: 10px;">
<td style="width: 1px;">
</td>
<td rowspan="2" style="font-size:19pwhite-space:nowrap;x;width:1px;">
Title
</td>
<td style="height:50%;">
</td>
</tr>
<tr style="height: 10px;">
<td>
</td>
<td style="height:50%;border-top: 1px solid black; border-right: 1px solid black;">
</td>
</tr>
</table>
<table style="width:100%;border-collapse: collapse;border:1px solid black;border-top:none;">
<tr>
<td>Content</td>
</tr>
</table>
Remove below line from css for table
border-collapse: collapse;
It worked for me in fiddle.
Alternately you could try adding a transparent border for the first table
<table style="border:1px solid transparent;>
I am trying to make an organisational chart in HTML. The code is fairly simple, but I have some problems with the rendering in Chrome/Safari and Opera.
Here is what the result should look like, as it works in Firefox and IE:
Here is in Chrome and Safari
And here is in Opera:
The problem comes from the border-collapse: collapse property in CSS. If I use the old coding style cellspacing="0" cellpadding="0"it works more or less, but is not valid in HTML5.
I created a jsFiddle to show the problem: http://jsfiddle.net/aGVp4/7/
My HTML:
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="3" class="right bottom"></td>
<td colspan="3" class="bottom"></td>
<td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
<td class="right"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="right"></td>
<td></td>
</tr>
<tr>
<td colspan="2" class="case"></td>
<td colspan="4"></td>
<td colspan="2" class="case"></td>
</tr>
</table>
And my CSS:
.orgchart {
border-spacing: 0;
border-collapse: collapse;
}
td {
width: 3em;
height: 1em;
}
td.case {
border: 1px solid black;
}
td.right {
border-right: 1px solid black;
}
td.bottom {
border-bottom: 1px solid black;
}
td.top {
border-top: 1px solid black;
}
The problems seems to be caused by different interpretations of the collapsing border model in browsers. The border conflict resolution is defined in terms of cells, not slots, and when you use colspan=3, one cell spans 3 slots.
The 2nd cell of the 2nd row has a solid bottom border, and the 2nd cell of the 3rd row has no top border. When borders collapse, solid wins none. But the cells are only partially adjacent, as they span different columns. Browsers hand this differently. Chrome makes the border span all the columns of the upper cell, whereas Firefox makes the border span only one column, the one that the cells share – which is more reasonable, but CSS 2.1 seems to leave the issue open.
I tried playing with border: hidden, which helps on Chrome but causes new problems on Opera.
It seems that there are two options. You could use the HTML attributes, if they do the job. Though declared obsolete and forbidden in HTML5 CR, the same document also requires continued support to them in browsers.
But a cleaner, and perhaps more robust, approach is to avoid the problem by adding more empty cells. This means dividing two 3rd row cells into two cells so that only one of them shares a border with the cell of the 2nd row. This makes the table even more grid-like, but not essentially more complex:
<table class="orgchart">
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="case" ></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="2" class="bottom"></td>
<td class="right bottom"></td>
<td class="bottom" ></td>
<td colspan="2" class="bottom" ></td>
<td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
<td class="right"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="right"></td>
<td></td>
</tr>
<tr>
<td colspan="2" class="case"></td>
<td colspan="4"></td>
<td colspan="2" class="case"></td>
</tr>
</table>
Add a new empty row <tr></tr> under the colspan will fix this problem (not a beautiful solution but works).
I played with your jsfiddle, and found a hack to fix the issue in Chrome and Safari.
Also works on FF and IE, but didn't test on Opera.
Try this (jsfiddle):
td.bottom {
border-top: 1px solid white; // this is the hack
border-bottom: 1px solid black;
}
td.right.bottom {
border-top: none; // fix for IE
}
As this is a hack, it may not work as your chart grows complex, but hope this helps in short-term.
I have dotted line separating two rows of the table like below.
<table cellspacing="0">
<tr>
<td>Issue</td>
<td>Date</td>
</tr>
<td style="border-bottom: 1px dotted red;padding-top:2px;width:800px;"></td>
<tr>
<td>Theres is a issue with the code</td>
<td>09-28-2012</td></tr>
</table>
This is fiddler version. I want to align that date on line somewhere not at the end. How can I do that.
Add colspan = "2" to the td that has the dotted line. colspan and rowspan define how many columns or rows the cell spans, respectively.
Here's a modified version of your demo: little link.
<table cellspacing="0">
<tr>
<td>Issue</td>
<td >Date</td>
</tr>
<tr>
<td class="td"></td>
<td class="td"></td>
<tr>
<tr>
<td>Theres is a issue with the code</td>
<td>09-28-2012</td>
</tr>
</table>
CSS:
.td{
border-bottom: 1px dotted red;width:800px;padding-top:2px;
}
DEMO
Please try this:
<table cellspacing="0">
<tr>
<td>Issue</td>
<td>Date</td>
</tr>
<tr style="border-bottom: 1px dotted red;padding-top:2px;width:800px;"><td></td><td ></td></tr>
<tr>
<td>Theres is a issue with the code</td>
<td>09-28-2012</td></tr>
</table>