So I have this code for a table in wordpress.
<table id="intCall" class="tablepress">
<thead>
<tr>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">COUNTRY</th>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">CODE/PREFIX</th>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">RATES</th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-1 odd">
<td class="column-1">Afghanistan</td>
<td class="column-2">93</td>
<td class="column-3">$0.4730</td>
</tr>
<tr class="row-2 even">
<td class="column-1">Afghanistan (Mobile A) Roshan</td>
<td class="column-2">9372, 9379</td>
<td class="column-3">$1.0110</td>
</tr>
.......
</tbody>
</table>
2 things are not showing up. The ID, and the thead, however the tr within the thead is showing up within tbody. Not sure whats going on.
Here is a screenshot of the DOM in developer tools.
https://gyazo.com/60bfb1616773de645ff99a53e142b9a7
Here is the site
http://t4.rd-client.com/magicjack/information/international-calling-rates/
Thanks
I found what it was. There was a theme setting to not allow certain tags. Not sure why that exists, but it was there :D
Related
I am creating a table for an university task. Every once in a while we have to put our code into a validator. For some reason the validator keeps showing these errors:
https://i.ibb.co/dLnzTh2/error.png
The errors are about the <th> tag inside the <thead>.
<table style="width: 700px" >
<thead>
<tr>
<th colspan="8">Market Shares of Graphics Adapters in Q4 2013
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">-</td>
<td rowspan="2">Q4 2013</td>
<td rowspan="2">Q3 2013</td>
<td colspan="4" rowspan="1" style="text-align: center">Quarter over Quarter Changes</td>
<td rowspan="2">2012</td>
</tr>
<tr>
<td colspan="2">Unit Shipments</td>
<td colspan="2">Share</td>
</tr>
<tr>
<td>AMD</td>
<td>18.30%</td>
<td>20.70%</td>
<td colspan="2">-10.40%</td>
<td colspan="2">-2.40%</td>
<td>19.70%</td>
</tr>
</tbody>
</table>
Any ideas what is causing this?
For reference this is how the whole table looks like:
https://i.ibb.co/LkMbWc9/table.png
This always means "a column without any cells" - harder to find with collspans, but possible - in the snippet Unit Shipments and Share are blue - this are doubled td, and it makes an empty column in both - since both are colspaned from the top.
Shortly - whole table is too wide of 2 not needed cells
td, th{ border: 1px solid red} /* this shows every th, td even empty */
td[colspan] { border: 1px solid blue} /* this shows colspans */
<table style="width: 700px" >
<thead>
<tr>
<th colspan="8">Market Shares of Graphics Adapters in Q4 2013
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">-</td>
<td rowspan="2">Q4 2013</td>
<td rowspan="2">Q3 2013</td>
<td colspan="4" rowspan="1" style="text-align: center">Quarter over Quarter Changes</td>
<td rowspan="2">2012</td>
</tr>
<tr>
<td colspan="2">Unit Shipments</td>
<td colspan="2">Share</td>
</tr>
<tr>
<td>AMD</td>
<td>18.30%</td>
<td>20.70%</td>
<td colspan="2">-10.40%</td>
<td colspan="2">-2.40%</td>
<td>19.70%</td>
</tr>
</tbody>
</table>
I would like to modify the email order notification in prestashop slightly and I don't where to start. The email templates are written in HTML and whenever I modify them the email comes out blank.
Here is the code:
<tr>
<td style="border:none;padding:7px 0">
<table class="table table-recap" bgcolor="#ffffff" style="width:100%;background-color:#fff"><!-- Title -->
<thead>
<tr>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Reference</th>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Product</th>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Unit price</th>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Quantity</th>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Total price</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" style="color:#777;padding:10px!important;border:1px solid #DDD!important">
{items}
</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Products</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_products}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Discounts</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_discounts}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Gift-wrapping</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_wrapping}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Shipping</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_shipping}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Total Tax paid</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_tax_paid}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" class="total" style="color:#555454;padding:10px!important;border:1px solid #DDD!important;font-size:18px;font-weight:500;font-family:Open-sans, sans-serif"><strong>Total paid</strong></td>
<td bgcolor="#fbfbfb" align="right" class="total_amount" style="color:#333;padding:10px!important;border:1px solid #DDD!important;font-size:21px;font-weight:500;font-family:Open-sans, sans-serif">{total_paid}</td>
</tr>
</tbody>
</table>
</td>
</tr>
I would like to remove all pricing information. Some price info is easy to identify and delete, e.g. {total_paid}, but there is also the itemized price info in the section of code below, in which all the info is just bundled together in {items}. How do I modify this?
<td colspan="5" style="color:#777;padding:10px!important;border:1px solid #DDD!important">
{items}
</td>
The file you're looking at is a simple Swiftmailer email template file, meaning it can only replace variables like {items}.
To output a dynamic list of products, you need a more powerful templating language which can loop over a list of products. That's why the HTML for the list of products is compiled at:
themes/default-bootstrap/mails/en/order_conf_product_list.tpl
Your theme and language ISO code in this path may be different.
This is wehre you actually edit the rows <tr> or products. If you remove a cell, don't forget to remove column title cell too <th>!
If your emails lose some styling when they're saved (e.g. they become 100% in width) it may be that you need to install this override:
https://gist.github.com/gskema/d3f62431965dbb5c8cdb04da97c9dc77
My HTML is:
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; ">
No Border here, just white background
</th>
<th style="width:60%; background-color:gray" colspan="3">
Superheading</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
How do I remove the border in the top left cell ie the cell that contains "No Border here, just white background".
Thanks.
You could do it like this - DEMO
HTML:
<body>
<style>
table, table th, table td {
border:1px solid black;
border-collapse:collapse;
}
</style>
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; background-color:white;" class="border-less"> </th>
<th style="width:60%;text-align:center" colspan="3">Assumed Growth Rate</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
</body>
CSS:
.border-less {
border-top: 1px solid white;
border-left: 1px solid white;
}
try to add :
style="border: none";
on th tag or the tr tag containing the headers.Depending on what you need..
This fiddle uses CSS and a '.borderless' class.
However, if you wanted to stick to inline styling, you could do this:
<th style="width:40%; border:none;">
I am trying to span background image over 2 table rows but this does not seem to work.
Html:
<table id="branchTable">
<thead>
<th align="center">Tel.</th>
<th align="center">Fax</th>
<td rowspan="2" id="branch-logo"> d</td>
</thead>
<tbody>
<td align="center">${_branch?.tel}</td>
<td align="center">${_branch?.fax}</td>
</tbody>
</table>
css:
#branch-logo {
background-image: url(/public/images/logo.png);
height:53px;
width:100px;
background-repeat: no-repeat;
background-position: left;
}
The image seems to be pushing the row down and not spanning accross.
UPDATE
<table id="branchTable">
<tr id="thead">
<th align="center">Tel.</th>
<th align="center">Fax</th>
<td rowspan="2" id="branch-logo"> d</td>
</tr>
<tr id="tbody">
<td align="center">${_branch?.tel}</td>
<td align="center">${_branch?.fax}</td>
</tr>
</table>
rowspan does not seem to work between tbody and thead. Using tr does the trick.
You forgot your <tr>s in your table. That's probably what causes it to misbehave.
And as Scott says, you use logo in your html and branch-logo in your css.
Edit: In addition, I'm not at all sure if all major browsers support rowspanning a cell over a thead and a tbody. That would take some testing.
I have the following :
<table style="border:solid 1px; border-color:black">
<thead style="border:solid 2px; border-color:black">
<tr>
<th>
<p>Document Date</p>
</th>
<th>
<p>Buy-from Vendor No.</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C01753</p>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C00522</p>
</td>
</tr>
</tbody>
</table>
I'd like to add a border around the whole table and one around the whole header. The table border is showing nicely (Internet Explorer), but the header border is not.
PS: I use inline styles because it's meant for a HTML body in a mail message.
EDIT
The following gave me what I wanted in Firefox, not in IE though
<table style="border: 1px solid black; border-collapse: collapse;">
<thead>
<tr style="border: 1px solid black">
...
EDIT
Added coloring
<table style="border: 2px solid black; border-collapse: collapse;">
<thead>
<tr style="border: 1px solid black; background-color: #EEE;">
...
Use rules="groups" and change your structure a bit:
<table style="border: 1px solid black; border-collapse: collapse;" rules="groups">
<thead style="border: 2px solid black;">
<tr>
<th>
<p>Document Date</p>
</th>
<th>
<p>Buy-from Vendor No.</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C01753</p>
</td>
</tr>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C00522</p>
</td>
</tr>
</tbody>
</table>
EDIT: Well, that doesn's seem to work in IE. In that case, I'd suggest:
<table style="border: 1px solid black; border-collapse: collapse;">
<thead>
<tr style="background-color: black; color: white;">
<!-- ... -->
You can't style a <thead> element, you need to style the <tr>
for example, like this
<table style="border:solid 1px black" cellpadding="0" cellspacing="0">
<thead>
<tr style="background-color: #EEE;">
<th>
<p>Document Date</p>
</th>
<th>
<p>Buy-from Vendor No.</p>
</th>
</tr>
</thead>
...
border styling does not apply, the normal thing is use the background color.
and btw border supports 3 attributes, including the color as well like
border: solid 1px black;
You can't style thead directly, but, you can style the child elements.
For example
<table>
<thead>
<tr>
<th>
<p>Document Date</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<p>18/03/11</p>
</th>
</tr>
</tbody>
If you want to style just the th of the thead, then your css is
thead th { mystyles }
JSFiddle
Try putting the style on your <tr> rather than <thead>.
Also, you can shorten the css like this: style="border: 2px solid black"
I don't think that that thead renders and is more for organisation. Style the row instead. UPDATE: tr does not support border either. Update version below.
EDIT
<table style="border:solid 1px; border-color:black;border-collapse:collapse;">
<thead>
<tr>
<th style="border:solid 2px black;border-right:none">
<p>Document Date</p>
</th>
<th style="border:solid 2px black;border-left:none">
<p>Buy-from Vendor No.</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C01753</p>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C00522</p>
</td>
</tr>
</tbody>
</table>
The border can be specified on a table or a cell (td or th). Specify a top and bottom border on all cells, a left border on the first cell and a right border on the last cell. To prevent gaps between the borders of cells the border-collapse style of the table needs to be set to border-collapse:collapse.