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;>
Related
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
I have spotted a strange issue with chrome when rendering table borders. I have four columns and I want the third column to have no borders. In Firefox it displays correctly, so that it looks like the first and second columns are a separate table from the fourth column, as you can see here:
However, in Chrome, the top border of the first columns extends right across all the other columns as you can see here:
This is what the html code is for this:
<tr style="border: none;">
<td style="width: 120px;">Surname</td>
<td style="width: 300px;">Bloggs</td>
<td style="border: none; width: 10px;"> </td>
<td rowspan="3" style="width: 100px;"><div class="studentimg" style="background-image:url('<%=strStudentPhoto%>');"></div></td>
</tr>
I know it is the first column that is cause the issue because I change the code to this:
<tr style="border: none;">
<td style="width: 120px;">Surname</td>
<td style="border-top: none; width: 300px;">Bloggs</td>
<td style="border: none; width: 10px;"> </td>
<td rowspan="3" style="border-top: none; width: 100px;"><div class="studentimg" style="background-image:url('<%=strStudentPhoto%>');"></div></td>
</tr>
and in Chrome it still shows as above, whereas in Firefox it now shows as only the first column have a top border, like this?
Anyone have any ideas how to fix this for Chrome?
Thanks
David
The following code (based on yours) does not show the problem you described in Chrome.
Note: I removed a lot of the inline styles, i removed the inline border from the trs, I applied rowspan="3" to the third cell in the first row and omitted the third cell in the following rows. For the rest of the settings see yourself in the snippet below:
table {
border-collapse: collapse;
}
td {
border: 1px solid #777;
}
<table>
<tr>
<td style="width: 120px;">Surname</td>
<td style="width: 300px;">Bloggs</td>
<td rowspan="3" style="border: none; width: 10px;"> </td>
<td rowspan="3" style="width: 100px;">
<div style="width:100px;height:100px;background:url(https://placehold.it/67x100/fc5) center center no-repeat;background-size:contain;"></div>
</td>
</tr>
<tr>
<td>Surname</td>
<td>Bloggs</td>
</tr>
<tr>
<td>Surname</td>
<td>Bloggs</td>
</tr>
</table>
I need to make a div with a solid border. I have a good start but having some trouble getting the alignment right and getting the lines working. Below is an image of the requested HTML
So far I think I'm some what close with my HTML but my two top lines do not match and I cant get the vertical line in.
code:
<div style="width:60%;border:solid">
<div style="width:45%; display: inline-block;">
<div style="margin-left:5px;">
Domestic Shipping and Handling<br>
<hr style="width: 5px;"/><br>
$25..01 to $50.00..add $7.95 <br>
$50.01 to $75.00...add $11.95 <br>
$75.01 to $100.00...add $13.95 <br>
$100.01 to $150.00...add $17.95 <br>
$150.01 to $200.00 .. add $19.95 <br>
200.01 – above.. add $23.95
</div>
</div>
<div style="width: 8%; display: inline-block;"><hr style="width: 1px; height: 100px;"></div>
<div style="width:45%; display: inline-block;">
Canada, AK, HI, PR Shipping and Handling<br>
<hr style="width: 5px;"/><br>
$.01-$25.00.. add $14.95<br>
$25.01 - $50.00.add $15.95<br>
$50.01 to $75.00...add $18..95<br>
$75.01 to $100.00...add $20.95<br>
$100.01 to $150.00..add $25.95<br>
$150.01 to $200.00..add $28.95<br>
$200.01 to above....add $32.95
</div>
</div>
Here is what my HTML looks like on the web page currently:
I'm currently missing the vertical line, top headers are not aligning and bottom texts are not aligning. Originally this was using a table which is fine but now we want it to be responsive and to use div's. I also can not use css. I would prefer to use css personally but that request was denied.
You should probably build this using html tables. See here for further help.
<style>
table,
th {
border: 1px solid black;
border-collapse: collapse;
}
td {
border-right: 1px solid black;
}
</style>
<table>
<tr>
<th>Domestic Shipping and Handling</th>
<th>Canada, AK, HI, PR Shipping and Handling</th>
</tr>
<tr>
<td> $25..01 to $50.00..add $7.95 </td>
<td> $.01-$25.00.. add $14.95</td>
</tr>
<tr>
<td>$50.01 to $75.00...add $11.95</td>
<td>$25.01 - $50.00.add $15.95</td>
</tr>
<tr>
<td>$75.01 to $100.00...add $13.95</td>
<td>$50.01 to $75.00...add $18..95</td>
</tr>
<tr>
<td>$100.01 to $150.00...add $17.95</td>
<td>$75.01 to $100.00...add $20.95</td>
</tr>
<tr>
<td>$150.01 to $200.00 .. add $19.95</td>
<td>$100.01 to $150.00..add $25.95</td>
</tr>
<tr>
<td>200.01 – above.. add $23.95</td>
<td>$150.01 to $200.00..add $28.95</td>
</tr>
</table>
Thank you so much for your post. I used your code and adjusted it a little to get my answer but your code is better then mine. Here is my code after adjustments:
<table style="border: 1px solid black;">
<tr>
<th style="border: 1px solid black; border-collapse: collapse; padding:5px;">Domestic Shipping and Handling</th>
<th style="border: 1px solid black; border-collapse: collapse; padding:5px;">Canada, AK, HI, PR Shipping and Handling</th>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;"> $25..01 to $50.00..add $7.95 </td>
<td style="padding:5px;"> $.01-$25.00.. add $14.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$50.01 to $75.00...add $11.95</td>
<td style="padding:5px;">$25.01 - $50.00.add $15.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$75.01 to $100.00...add $13.95</td>
<td style="padding:5px;">$50.01 to $75.00...add $18..95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$100.01 to $150.00...add $17.95</td>
<td style="padding:5px;">$75.01 to $100.00...add $20.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$150.01 to $200.00 .. add $19.95</td>
<td style="padding:5px;">$100.01 to $150.00..add $25.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">200.01 – above.. add $23.95</td>
<td style="padding:5px;">$150.01 to $200.00..add $28.95</td>
</tr>
</table style="border: 1px solid black;">
Hope it helps someone else. I added padding as well to this because the other version was really close together and hard to read.
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>
I have a table with the following class:-
.multicolor {
border: 1px solid #000000;
}
and for one specific table row I wanted to remove the left and right borders, replacing them with top and bottom so that it looks like one table is ending and another is beginning. Here's how I was trying it and no any luck.
<tr style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<td colspan="7" style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<br></td>
</tr>
The top and the bottom borders are appearing but the side ones remain. Does anyone know if there is a way to override the inherited border property for that row?
try this.
table {
border-collapse:collapse;
}
td {
border:none;
}
You have to set border of your td or th "none";
May be this will help hide cells border using css
hello See the below fiddle as you mentioned the merge row I did this for both border and without border in the rows .hope it helps
<table>
<thead>
<tr>
<th class="col1">1</th>
<th class="col2">2</th>
<th class="col3">3</th>
</tr>
</thead>
<tr class="first">
<td>asdas</td>
<td>asdas</td>
<td >boooo</td>
</tr>
<tr class="second">
<td>asdas</td>
<td>asdas</td>
<td>asdas</td>
</tr>
</table>
see the below fiddle
fiddle demo
try this,working fine
<style>
.border {
border:solid 1px #000;
}
.border-head {
border-bottom:solid 1px #000;
}
</style>
<table width="300" border="0" cellpadding="0" cellspacing="0" class="border" >
<thead>
<tr>
<td class="border-head"> </td>
<td class="border-head"> </td>
<td class="border-head" > </td>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>