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>
Related
I'm using Laravel DOMPDF Wrapper and I want to print a table on a PDF but when it reaches the bottom of the page, my table breaks, I want the whole to go down but can't find a way to do this.
Table Structure:
<table class="tabla1">
<tr align="center">
<td style="width: 35px;" >Nº</td>
<td>FROM</td>
<td>TO</td>
<td class="hiddebottom">DETAILS</td>
<td style="width: 60px;">COST</td>
</tr>
<tr align="center">
<td class="hiddebottom"></td>
<td>Takami Rodriguez</td>
<td>Sara portan</td>
<td class="ocultar"></td>
<td class="ocultar"></td>
</tr>
<tr align="center">
<td class="ocultar">1</td>
<td class="dir">asdasdasdasdassadasasdasdasd</td>
<td class="dir">asdasddadasdsadadadadadasdasdasd</td>
<td>&bsp;</td>
<td class="ocultar">$23</td>
</tr>
<tr align="center">
<td class="hidetop"></td>
<td> 61569559 </td>
<td> 61569559 </td>
<td></td>
<td class="hidetop"></td>
</tr>
</table>
I'm using:
table tr td{
border: 0.3px solid black;
page-break-inside: avoid !important;
}
Helps please
Try changing your CSS to this.
table {
border: 0.3px solid black;
page-break-inside: avoid !important;
}
I'm trying to copy the Staff Directory portion part of this page from CSS, Javascript and HTML to just HTML. Most importantly, I'd love to be able to just make a table as you see here with only the bottom borders/dividers (or whatever they are called) for each line. How do I do that?
http://sps.columbia.edu/about/staff-directory
Thanks!
Edit:
I need only HTML, no CSS please. Thank you though!
Just use the following code-snippet and paste it in you style.css
table {
border-collapse: collapse;
}
tr{
border-bottom: 1px solid black;
}
<table>
<tbody>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
</tbody>
</table>
Without using style.css
<table style="border-collapse: collapse;">
<tbody>
<tr style="border-bottom: 1px solid black;">
<td>Lorem</td>
<td>Ipsum</td>
</tr>
</tbody>
</table>
Here's a pure HTML version with inline styles.
Notice styles like "border-collapse" on the TABLE, "border-bottom" and "line-height" on the TRs, and "width" on the TDs
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 80%; margin: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 0.85em;">
<tbody>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Dean</td>
<td style="width: 30%; text-align: right;">Joe Cool</td></tr>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Senior Vice Dean</td>
<td style="width: 30%; text-align: right;">Jane Cool</td></tr>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Vice Dean</td>
<td style="width: 30%; text-align: right;">John Doe</td>
</tr>
</tbody>
</table>
I believe you want to remove the border from your table.directory tr and add it to the tbody element.
That will give you a border just between each section.
you could use this
<table style="border-bottom: 1px solid black">
<tr>
<td>Someone</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Dean</td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td>Jane</td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td>Scott</td>
</tr>
<tr>
<td><hr /></td>
</tr>
</tbody>
</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>
I dont know if this is possible but...I am trying to format a table with css, to have a specific look. This is for a wordpress site that will be updated by my client. The problem is that she is going to be copying/pasting tables with a specific format, and i want the table to have that format without her doing any extra work.
This is what i have so far.
I want the cells with the Bold text to not have a dotted line bellow them.
Right now i am formating the tr lines to add the dotted lines like this:
html
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong></td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong></td>
</tr>
.....
css
.dotted tr:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted tr:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
Is there a way i can do this without having to add a custom class tag for each that has the bold text in it ?
This is how i want it to look like, but this is all done manually...That's what i am trying to avoid.
ps: Sometimes the tables might have more than 1 'data' under the bold letters so its not always odd, even lines, when it comes to the 'title' and the 'plays' bellow them. (this is a site for musical plays)
-Thanks
#Manoj Kumar Yeah the bold items are always under colspan 2
Since you stated the above comment, I have a CSS hack for it.
Change your CSS to have dotted border only on td instead of tr elements.
Target the elements with colspan=2 with attribute selector to have no border.
table {
background: gray;
}
.dotted td:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td[colspan="2"] { /* Attribute selector */
border: 0 none;
}
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
</tbody>
</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;>