The DITA Open Toolkit automatically inflicts some inline table attributes when one publishes to HTML, including frame="border" and rules="all".
I need to override this "rules" attribute using CSS styles for cells, and while I can get the desired result in IE and Chrome, Firefox puts solid black gridlines in the table and refuses to budge on the matter.
Obviously I can't edit the HTML, company policy is to not edit the XSLT, so how can I remove these gridlines using CSS alone?
I've tried various cunning combinations of border-xxxxxx styles and given them !important declarations to no effect.
The HTML says...
<table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all">
<thead>
<tr>
<th class="cellrowborder">Type </th>
<th class="cellrowborder">Comment </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder">Caution </td>
<td class="cellrowborder">Think twice. </td>
</tr>
<tr>
<td class="cellrowborder">Attention </td>
<td class="cellrowborder">Be careful. </td>
</tr>
<tr>
<td class="cellrowborder">Danger </td>
<td class="cellrowborder" >Be scared. Be very scared. </td>
</tr>
</tbody>
</table>
The CSS says
table {border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
font-size: 9pt;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px;}
tr {border: none;}
.cellrowborder {border: none;}
So while it looks as I'd expect in IE, it doesn't in Firefox UNLESS I remove those frame/border/rules attributes in the HTML. Which I can't in production.
Use jQuery's remove attribute on document load to remove the old attributes all together.
api.jquery.com/removeAttr
I've had a quick play with <table frame="border" rules="all">. The key seems to be to override it with another border, for example:
table {
border: none;
border-collapse: collapse;
}
td {
border: 1px solid silver;
}
It's not ideal if you need to remove the border altogether, but I guess you could match the border-color to the page background?
border-color seems to apply.
Maybe using FireBug Inspect Element can help you detect the CSS property and allow you to target it in Firefox (instructions here).
Can you post an example of the code?
Related
I'm trying to create a newsletter template in order to paint different lines for every product but the HR tag is not working...
I've been trying with divs, table, CSS properties but none of them seems to be a good solution.
It is working in my Chrome but after sending the template to the provider the HR disappears.
Does someone know how to solve it? Why is it?
I've created a table instead of a hr tag, but is not working in Gmail... (working in Outlook, Aol and Yahoo).
<table style='border-collapse: collapse; width: 100%;'>
<tr style='border-bottom: 1px solid #BDBDBD;'>
<th> </th>
</tr>
</table>
Check the presence of <hr> tag in your DOM using developer tools, does it exist there in your page or your DOM is not loading that hr tag in first place.
Just try this. This will work out!
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="background:none; border-bottom: 1px solid #BDBDBD; height:1px; width:100%; margin:0px 0px 0px 0px;"> </td>
</tr>
</table>
The hr approach works well on Gmail, as well as the latest Outlook also.
<hr height="1" style="height:1px; border:0 none; color: #BDBDBD; background-color: #BDBDBD; margin-top:1.5em; margin-bottom:1.5em;">
I'm using Bootstrap 3.3
I have a HTML code as follows:
<div data-name="md-PersianDateTimePicker">
<table class="table table-striped">
<tr>
<td data-name="day">03</td>
<td data-name="day">04</td>
<td data-name="day">05</td>
<td data-name="day">06</td>
<td data-name="day">07</td>
<td data-name="day">09</td>
<td data-name="day" class="text-danger">09</td>
</tr>
.
.
.
</table>
</div>
How can I set padding:2px to each td?
I tested the following, it doesn't work!
[data-name="md-PersianDateTimePicker"] td{
padding: 2px;
}
Simply increase the specificity of your selector. If what you have currently doesn't work, try adding the table into it as well:
[data-name="md-PersianDateTimePicker"] table.table.table-striped td[data-name="day"] {
padding: 2px;
}
add !important specifier
[data-name="md-PersianDateTimePicker"] td{
padding: 2px !important;
}
DEMO FIDDLE
NOTE :
Never use !important on site-wide css. Only use !important on
page-specific css that overrides site-wide or foreign css
http://codepen.io/louisverdiguel/pen/vCJFh
this is my first time here i hope i am doing it right.
html
I have created a string of rows and columns with html for a client to "resemble" a spreadsheet.
CSS
I have created a css class class="sale td"
within the class .
.sale td {border: 1px solid grey; }
to have a border show for each row
issue: i would like to remove the border from any <tr> that contains a <h2> tag
how would i go about creating such a specific class or action with the CSS and what is this method called?
You can try like this: LINK
CSS:
.sale tr.no_border td {
border: 0px !important;
}
HTML:
<tr class="no_border">
<td colspan="3" align="left" valign="top"><h2>Bottles</h2></td>
</tr>
You can only try to add style tag to each row, for which you want to remove the border.
For example:
<td colspan="4" align="left" valign="top" style="border:none;">
You can't go backwards like that setting styles for a tag based on tags inside it. You have to mark the tr/td with a class if it contains a h2 in order to do this.
Edit:
An example.
CSS
.noborder {border:none !important}
"!important" ensures it overrides the other CSS style.
HTML
<td class="noborder">
Edit2:
Also ".sale td" in your CSS means any <td> inside a block (table in this case) with a class of "sale". So you don't set a class of "sale td" on your <table> - but just "sale"
For every row you can use this css:
.sale td {border: 1px solid grey; }
but for the rows with <h2> in it:
.sale tr.no-border td {
border: 0px !important;
}
and your html will look like:
<tr class="no-border">
<td colspan="3" align="left" valign="top"><h2>Heading</h2></td>
</tr>
I have the following code in my html email.. it's inside a table field:
<span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span>
Now, this 'orange line' does show up in html email when it's send to Thunderbird, but a recipient that uses Outlook 2010 doesn't see the line.
And yes, I know there is another thread about this, but I tried that solution (only difference I saw was that I had display:block instead of display:inline-block;).. and it didn't work.
Any other suggestions?
table:
<table border=0 cellpadding=5 cellspacing=0 style="font:300 15px/1.625 'Helvetica Neue',Helvetica,Arial,sans-serif">
<tr><td colspan=5><span class=solid style="width:100%;height:1px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr>
<td nowrap style="font-size:12px;" colspan=2>Item Description</td>
<td width=50 nowrap style="font-size:12px;">Price</td>
<td width=50 style="font-size:12px;">Quantity</td>
<td width=50 nowrap style="font-size:12px;">Sub Total</td>
</tr><tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr>
<td valign=top>
</td><td style="font-size: 10px;" nowrap valign=top><h2 style="margin:0;">Vitamin C </h2></td>
<td nowrap valign=top>$39.95</td>
<td nowrap valign=top><input type="text" name="qty1" value="3" size=2 readonly=readonly></td>
<td nowrap valign=top>$1.00 </td></tr><tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:block;"></span></td></tr>
<tr><td colspan=4>Order Subtotal</td><td>$1.00</td></tr>
<tr><td colspan=3></td><td colspan=2><span class=solid style="width:100%;height:5px;border-top:1px dashed #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=3></td><td colspan=2><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=3> </td>
<td colspan=2>[checkout]</td></tr></table>
When the table does not appear in the emails.
I spent a lot of time researching and in the end I found the solution.
Here I leave a code that has served me in Outlook emails and iMac Mail.
To show the table:
<table rules="all" bordercolor="#4d4c4d" border="1" bgcolor="#FFFFFF" cellpadding="10" align="center" width="800">
</table >
I hope it serves you.
It seems you could put the border on the TD instead of the SPAN, that works in OL 2010.
I added:
.solid1 {border-top:1px solid #f89d30;}
.dashed1 {border-top:1px dashed #f89d30;}
used those in the TD that encloses the span, deleted the spans completely and replaced them with and now it looks the same in outlook as it does in browser (and the same as your original html).
#Malachi you also need to include a background colour for your <td>
so
<td bgcolor="#da5903" style="height:5px;">
<img src="mydomain.com/orangepixel.gif" alt="" />
The gif is there purely to make the TD behave and fix to the right height. Background images are not always supported, so it is safer to use an IMG, the reason it is transparent is because you use the background colour on the TD, the image is purely to fix the height.
This might not be a complete answer, as I don't have access to an outlook 2010 client (see edit below), but here is my best attempt:
According to this, the display style property is not supported in outlook 2010:
http://campaignmonitor.cachefly.net/assets/files/css/campaign-monitor-guide-to-css-in-email-jan-2013.pdf?ver=1252
Since <span> is an inline element, and since display doesn't work in outlook 2010, then giving an inline element a border might not be supported in outlook 2010. Try to switch it to a div (or better, put the border-top style on the tr/ td)
e.g.
<tr><td colspan="5"><div class="solid" style="width:100%;height:1px;border-top:1px solid #f89d30;"></div></td></tr>
EDIT: just tested it on outlook 2010, it didn't do the trick.
What always worked for me for outlook, is to use a tr and td with height 1px, no padding or margin / spacing, and a 1px clear pixel image (or   and a very small font size)
Alternative to the accepted answer:
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
Source: https://powerusers.microsoft.com/t5/Power-Apps-Community-Blog/Create-HTML-Table-with-Border-while-sending-Email-using/ba-p/1437996
I'm having a problem that appears to only occur in Chrome and nowhere else. I have a table, which has a style applied to it on hover. In other browsers, the style is applied when hovering over any part of the row. However, in chrome, at the edge of each td, the style is no longer applied. If I "inspect element" on this small 1px wide area between cells, the elements pane shows that Chrome thinks I am within the table, but not within the row itself. Here is some code which produces this effect:
CSS:
table.tablesorter tbody tr:hover {
background: #8dbdd8;
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0px;
border: none;
}
HTML:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bach</td>
<td>42526</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Doe</td>
<td>243155</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>Conway</td>
<td>35263</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
</tbody>
</table>
Anybody seen this before / know a way around it?
If it helps, I am using Chrome 13.0.782.220.
Live demo: http://jsfiddle.net/yNPtU/
Interestingly this is not caused by the border. If you set a border width to 10px, there is still only 1px in-between the cells that causes this.
I tried setting the position of the tds which seemed to work. Here is a demo: http://jsfiddle.net/lnrb0b/6harr/
Note: I've added the padding in to keep the size consistent
As mentioned in this question, this will solve it:
td {
padding: 2px 5px;
position:relative;
}
And the JsFiddle.
The table has cellpadding and cellspacing by default. You will need to add:
<table cellspacing="0" cellpadding="0">
Give border-spacing:-1px in css.