Ive made a new invoice template with the PDF Templates page. How do I make it as if there were two products selected for the invoice? When I try and add $aos_products_quotes_name, it makes two separate tables for two different producst. How can I make it so that two products with their pricing can show up in one table?
Here's the html if you are interested for the template:
<table style="height: 110px; width: 1615px;" border="0">
<tbody>
<tr>
<td>Sarah J Bauling</td>
<td style="text-align: right;"> Tel: 011 705 3201</td>
</tr>
<tr>
<td>1 Jacana Street </td>
<td style="text-align: right;">Fax: 011 705 3203 </td>
</tr>
<tr>
<td>Fourways </td>
<td style="text-align: right;">Cel: 083 457 3402 </td>
</tr>
<tr>
<td>Johannesburg </td>
<td> </td>
</tr>
<tr>
<td>2191</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p><strong>Invoice No: $aos_invoices_number</strong></p>
<hr />
<p> </p>
<p> </p>
<table style="height: 58px; width: 1649px;" border="0">
<tbody>
<tr>
<td>To: $billing_account_name</td>
<td style="text-align: right;">Fax: $billing_account_phone_fax</td>
</tr>
<tr>
<td>$billing_account_jjwg_maps_address_c</td>
<td style="text-align: right;">
<p>e.m: $billing_account_email1</p>
</td>
</tr>
<tr>
<td>$billing_account_suburb_c</td>
<td style="text-align: right;">Cel: $billing_account_phone_alternate</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 112px; width: 1637px;">
<tbody>
<tr>
<td>
<p>Date:</p>
</td>
<td>$aos_invoices_date_entered</td>
<td> </td>
</tr>
<tr>
<td style="border-top: 1px solid black;">No:</td>
<td style="border-top: 1px solid black;">Description</td>
<td style="border-top-width: 1px; border-top-style: solid; border-top-color: black; text-align: right;">Balance</td>
</tr>
<tr>
<td style="border-top: 1px solid black;">
<p>$aos_products_quotes_product_qty</p>
</td>
<td style="border-top: 1px solid black;">
<p>$aos_products_quotes_name</p>
</td>
<td style="text-align: right; border-top: 1px solid black;">$aos_products_quotes_product_unit_price</td>
</tr>
<tr>
<td style="border-top: 1px solid black;">
<p>SUB TOTAL:</p>
</td>
<td style="border-top: 1px solid black;"> </td>
<td style="text-align: right; border-top: 1px solid black;">$aos_invoices_subtotal_amount</td>
</tr>
<tr>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">TOTAL</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;"> </td>
<td style="text-align: right; border-top: 1px solid black; border-bottom: 1px solid black;">$aos_products_quotes_product_total_price</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 20px; width: 1621px;" border="0">
<tbody>
<tr>
<td style="text-align: right;">TOTAL AMOUNT DUE (e&eo)</td>
<td style="text-align: right;">$aos_invoices_total_amt</td>
</tr>
</tbody>
</table>
Can you share the HTML after rendering?
Is this HTML from tpl file?
You have to loop through your products array and you need to replicate the
<td>
tag in that loop.
Current HTML for products seems not correct.
Related
I am working on a project where I need to coloring columns of an html table based on how much percentage of a total that data takes up. For example if Alice has 3 apples and 1 orange, that row should be 75% colored for apple, and the other 25% for orange. And if Bob has 2 apples and 2 oranges is should be colored 50/50. My expertise isn't in HTML/CSS, so I am very confused with how my html is working.
If do only one row of a table I get the correct answer, but when I add rows, they couple together and don't have the same proportions.
<table style="width: 100%">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76" bgcolor="#4a5666"> </td>
</tr>
</table>
Am I doing something wrong, and is there a way I can fix it?
Thanks
Coupled Rows
Check this solution out:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
Credits to #TokPhobia for this answer (html table cell width for different rows)
tables have columns. The width of a column is constant. Use separate tables
table{
box-sizing:unset;
border-spacing:0;
}
<table style="width: 100%;">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76%" bgcolor="#4a5666"> </td>
</tr>
</table>
You're printing two rows of table in a wrong way, try to use col and row class in your tag. That's how it'll be responsive also won't need to add the width too.
I am having trouble creating a fixed-size table with no wrapping. I have tried looking in many places but cannot find a solution to this problem. I have posted codes of what I think seems to be the problem.
Here is the table layout I am trying to get:
<table style="border: 1px solid black; table-layout:fixed; border-collapse:collapse;">
<tr>
<th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0
</th>
<td width="230px" colspan="6" style="border: 1px solid black;">1
</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;">8
</td>
<td colspan="3" style="border: 1px solid black;">9
</td>
</tr>
<tr>
<td width="41" style="border: 1px solid black;">14
</td>
<td width="25" style="border: 1px solid black;">15
</td>
<td width="25" style="border: 1px solid black;">16
</td>
<td width="25" style="border: 1px solid black;">17
</td>
<td width="25" style="border: 1px solid black;">18
</td>
<td>19
</td>
</tr>
</table>
Essentially, in the above table, boxes 0, 1, 8, 9 and 14 -- 18 are fixed width, and 19 is allowed to change size according to the other fixed widths. However, with this table, the entire table resizes with the window despite having layout:fixed. To combat that, I tried including width="460px":
<table style="border: 1px solid black; table-layout:fixed; border-collapse:collapse;" width="460px">
<tr>
<th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0
</th>
<td width="230px" colspan="6" style="border: 1px solid black;">1
</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;">8
</td>
<td colspan="3" style="border: 1px solid black;">9
</td>
</tr>
<tr>
<td width="41" style="border: 1px solid black;">14
</td>
<td width="25" style="border: 1px solid black;">15
</td>
<td width="25" style="border: 1px solid black;">16
</td>
<td width="25" style="border: 1px solid black;">17
</td>
<td width="25" style="border: 1px solid black;">18
</td>
<td>19
</td>
</tr>
</table>
This does indeed solve the resizing problem, but now the desired widths for boxes 14 -- 19 are ignored! This has been extremely frustrating and I have tried many many suggestions from online.
A couple of my constraints:
Trying to avoid divs since this is for an email signature and the
mail clients I am trying to stay compatible with handle divs quite
poorly
I prefer not to use nested tables, since again, different mail
clients seems to handle inline block / floating elements in quite
different ways
<table style="border: 1px solid black; border-collapse:collapse;" width="460px">
<tr>
<th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0
</th>
<td width="230px" colspan="6" style="border: 1px solid black;">1
</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid black;">8
</td>
<td colspan="3" style="border: 1px solid black;">9
</td>
</tr>
<tr>
<td width="41px" style="border: 1px solid black;">14
</td>
<td width="25px" style="border: 1px solid black;">15
</td>
<td width="25px" style="border: 1px solid black;">16
</td>
<td width="25px" style="border: 1px solid black;">17
</td>
<td width="25px" style="border: 1px solid black;">18
</td>
<td width="auto">19
</td>
</tr>
</table>
Try, style="max-width: 41px" maybe works.
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>
Hi I have a problem showing in Google Chrome.There is additional line showing in Google chrome, but in IE and in Dreamweaver, there is no such line.
The idea is to give a cell 3 borders. I have highlighted with in the snippet where this problem code is.
Thanks for your help in advance.
HTML snippet
table {
width: 500px;
border-collapse: separate;
table-layout: fixed;
border-spacing: 4px;
border: 1px solid grey;
}
.ArrowCell {
border-bottom: 1px solid red;
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 0;
}
<table>
<tr>
<td rowspan="3"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td bgcolor="#C4E1FF"><b>resultw</b></td>
</tr>
<tr>
<td rowspan="4" class="ArrowCell"> </td>
<td bgcolor="#F0F0F0"> sdf</td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>resut1</b></td>
<td rowspan="2">←</td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="7" class="ArrowCell"> </td>
<td bgcolor="#F0F0F0"> 345</td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td bgcolor="#C4E1FF"><b>result</b></td>
</tr>
<tr>
<td rowspan="3"> </td>
<td bgcolor="#F0F0F0"> sf</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>rest</b></td>
</tr>
<tr>
<td rowspan="5" class="ArrowCell"> </td> <If I remove the class="", then the whole line will disaapear-->
<td bgcolor="#F0F0F0">sfd</td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>result 2</b></td>
<td rowspan="2">←</td>
<td rowspan="3"> </td>
</tr>
<tr>
<td rowspan="5" style="border-left-color:#FFF"> </td>
<td bgcolor="#F0F0F0">4356 </td>
</tr>
<tr>
<td rowspan="4"> </td>
<td rowspan="4"> </td>
</tr>
<tr>
<td bgcolor="#DFFFDF"><b>resultw</b></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td bgcolor="#C4E1FF">avv</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
One solution tried that doesn't work
Add this class to the cell that with additional line.
.ArrowLeft {
border-bottom: 2px solid white;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
}
UPDATE
Although OP's problem may seem specialized, this could apply to anyone that has experienced a stubborn border on a table and can't seem to get rid of it.
Add the following to the table:
Table {
border-collapse: separate;
border-spacing: 0;
empty-cells: hide;
}
This is the result: http://jsfiddle.net/zer00ne/0Leqah5r
Try:
.ArrowCell {
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
border-right: 0 solid transparent;
}
I don't see that extra line in Chrome PC, but when I inspect it with devtools, computed style for .ArrowCell is reported as 0.8px solid black; so I'm guessing that changing it's color to transparent should work.
I just thought of another possibility to your issue. Double check and see if your rowspans might be conflicting by crossing into each other.
Another possible fix is to change border-collapse: separate; to border-collapse: collapse; and maybe border-spacing: 0 as well.
I've the below HTML Table. and her i want to get only first row border and the rest only column borders only. as given in the screenshot. please let me know how i can do it in my css.
<table cellspacing="1" class="topbotcol">
<thead>
<tr>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Item</span>
</th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Qty</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Unit</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Rate $</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">BUILT-UP WATERPROOF MEMBRANE PANEL ROOFING TO FLAT ROOFS AND POOL DECK</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Preparing surfaces: priming and applying “Grims K1” slurry and “Grims Premier K10” waterproof membrane system as specified</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Membrane collars; pointing with epoxy; reinforced with clamp rings around flanges of rainwater outlets</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left">
<div class="para">A</div>
</td>
<td class="rowsep" align="center">
<div class="para">200mm diameter</div>
</td>
<td class="rowsep" align="center">
<div class="para">13</div>
</td>
<td class="rowsep" align="center">
<div class="para">No.</div>
</td>
<td class="rowsep" align="center">
<div class="para">34.28</div>
</td>
<td class="rowsep" align="center">
<div class="para">445.64</div>
</td>
</tr>
</tbody>
</table>
Thanks
table {
border-top: 1px Solid Black;
border-left: 1px Solid Black;
border-bottom: 1px Solid Black;
border-spacing: 0;
}
th, td {
border-right: 1px Solid Black;
}
th {
background-color: lightgrey;
border-bottom: 1px Solid Black;
}
You can use pseudo classes here:
As your table has th for table headers then you can try this:
table.topbotcol tr:first-of-type{
border-bottom:1px solid #ccc; // Will apply border to first row
}
table.topbotcol tr:first-of-type td{
border:none; // will not apply border to tds of first row, and continue after first row
}
You haven't provided detailed description, i think this might help you!
Pseudo-Classes
Docs
:first-of-type
What you need to do is set a border and set the table border to collapse. This will merge the cell borders. Then remove the unwanted top and bottom borders.
table, th, td{
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
td {
border-bottom: none;
border-top: none;
}
Here's a JSFiddle with a fuller example as well as some more optimizations.
Link to JS Fiddle
Suggestions:
don't use valign or align on table cells, use CSS vertical-align and text-align instead
use paragraph tags instead of <div class="para">
use class names that are descriptive of the content, not its style. This helps with maintenance later when you decide that you do not want something to be font-style-bold anymore. It is easier to change <th> in the CSS than it is to change it in the CSS and THEN go back and change ALL font-style-bold to font-style-normal in your HTML.
You can achieve that by setting the border on the td and th cells, but making the border-top and border-bottom none for the td, but then setting surrounding border of the entire table as well.
The following css is an example:
table {
border-collapse:collapse;
border: 1px solid #000;
}
th {
background-color: #ccc;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
td {
border-left: 1px solid #000;
padding: 5px;
}
Link to JS Fiddle
Try this
http://jsfiddle.net/aYCjA/
.tbl {
border: 1px solid black;
border-collapse: collapse;
min-width: 300px;
text-align: center;
}
.tbl th, .tbl td {
padding: 2px 5px;
}
.tbl td {
border-left: 1px solid black;
border-right: 1px solid black;
}
.tbl th {
border: 1px solid black;
}
The important thing here is border-collapse: collapse. This attribute prevents showing duplicate borders in sibling cells.