So I've battled against an HTML email and including Outlook support for some time now. Within the code below Gmail and Outlook both display the <td> at 15px in height. Why? Its only meant to be a cross client hr replacement for a dotted separator line.
<!-- Dotted Horizontal border Outlook Optimized-->
<table style="width:100%;border-bottom:1px dotted #999999;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody align="center" border="0" cellpadding="0" cellspacing="0">
<tr align="center" border="0" cellpadding="0" cellspacing="0">
<td style="background:none;height:1px;width:100%;vertical-align:middle;" border="0" cellpadding="0" cellspacing="0" ></td>
</tr>
</tbody>
</table>
UPDATE:
So its because there is an "empty" cell. I thought that an would take care of it but more was needed. I also tried putting the 1px image inside the cell as mentioned by #Vitorino Fernandes, the height persisted.
The nbsp does in fact need to exist for several email clients and the use of line-height:0px; finally flattened the cell.
as per looking at your code i understand that you are using table to give border -- dont use table because empty table will give some space use td instead and spacer image with height 1px(ad per your border height) and give bg-color to td
or if you want to use the same layout
add a spacer image in the empty td with height 1px and background color- as per your border and give line-height:1px to the parent tr
Related
I have a simple table with two columns and five rows. I want it to be more keyboard accessible.
Left column is just text, right column are buttons that fill when focused/hovered.
Is there a way to change background color of entire row when tabbed (focused) and fill the button background color at the same time?
Edit: Added for focus
Assuming you have a table like this:
<table style="width:100%">
<tr class="hoverable-row">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr class="hoverable-row">>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="hoverable-row">>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
then in css
.hoverable-row:hover, :focus {
background-color: yellow;
}
Also, please read https://stackoverflow.com/help/how-to-ask on how to ask questions in a good way.
Here is a sample: JsFiddle
I have a table with 3 columns. Each should have 500px. But my table is resized to fit within the parent div (600px).
The width of my table should be 1500 (3x500) and a scrollbar should be displayed in parent div. How can I resolve this without adding a "width=XXX"?
<div id="container">
<table id="table">
<colgroup>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
</colgroup>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Apply min-width to the table tag (it doesn't work on col as explained in my comment on the OP).
Updated CSS:
#table {
table-layout:fixed;
margin:3px;
border-collapse:collapse;
min-width: 1500px;
}
Tested in Chrome and Firefox, and should be widely supported (according to caniuse).
Edit I've realised this answer doesn't actually answer your question, as it works around the col tag problem rather than solving it. I hope it helps anyway though.
I've got a rather wide (1200+px) Telerik Grid in Telerik Extensions for ASP.NET MVC in Razor Syntax and I want to be able to hide / unhide certain columns based on the width of the end user's viewport in their browser. Is this possible?
My wish would be to have 3 columns appear that are otherwise set to .Hidden(true) if viewport width was >1024px.
One possible solution is to use media queries and the technique of responsive design.
The basic principle would be to render all columns so they are all emitted in the HTML (i.e. set Hidden to false on all columns) and then use media queries in the CSS to show/hide the appropriate columns based on the viewport width.
I'm not sure of the exact markup that the Telerik grid emits, but I've created a jsfiddle that demonstrates the concept with a basic HTML table here: http://jsfiddle.net/peRq2/
HTML:
<table>
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th class="wide">Header (wide)</th>
<th class="wide">Header (wide)</th>
<th class="wide">Header (wide)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td class="wide">Value</td>
<td class="wide">Value</td>
<td class="wide">Value</td>
</tr>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td class="wide">Value</td>
<td class="wide">Value</td>
<td class="wide">Value</td>
</tr>
</tbody>
</table>
CSS3 (with the media query based on a width of 600px - you can change to 1200px):
#media (max-width: 600px) {
.wide {
display: none;
}
}
The idea is that the ths and tds marked up with the wide class are hidden when the viewport is less than 600px. Try changing the width of the result pane on the jsfiddle to see the result of the media query at work.
One thing to note is the browser compatibility of media queries (basically IE9 and above and all other modern browsers): http://caniuse.com/css-mediaqueries - there's also more here: http://webdesignerwall.com/tutorials/css3-media-queries
Hope this gives you some inspiration!
Sending out mass emails, pretty much the whole thing is inside tables.
CSS affecting the table:
.title {
vertical-align: top;
}
HTML:
<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title" align="left" width="440" valign="top">
<h2><singleline label="Title">Enter your title</singleline></h2>
<p><multiline label="Description">Description</multiline></p>
</td>
<td align="left" valign="top" width="20"><img src="/images/00.gif" height="1" width="20" border="0"></td>
<td align="left" valign="top" width="120"><img src="/images/001.jpg" editable="true" label="Image" width="120" border="0"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top" width="580"><img src="/images/00.gif" height="20" width="1" border="0"></td>
</tr>
</table>
I need the text inside the tag to be flush with the top of the table. Currently the /images/001/jpg is flush, but the text is 5 pixels below the edge of the table.
I'm using vertical-align: top in the CSS, have tried border-spacing: none, border-collapse: collapse, and border: none. None of them solved the problem.
Using margin-top: -5px; on the tag solved the problem in standard browser testing, but wasn't supported by some email clients.
this is Ros from Campaign Monitor. What isn't entirely obvious is that the <singleline> and <multiline> tags convert into <p>your content</p>
...when imported into the Campaign Monitor editor. It's these <p> tags that are creating this extra padding - here's an example.
The easiest way to avoid this is to add p { margin: 0; padding: 0; } to your CSS styles.
Hopefully this fixes this issue for you. Note that we have a forum for answering questions like this, so feel free to post your template code there in the future.
Many thanks to everyone who contributed here!
Ros' suggestion suffices most of the time, but Gmail removes your header styles which leaves the inserted p tags with gmail's default margin top and bottom.
An alternative to get around this is by adding a div tag within your multiline tag. This will successfully prevent Campaign Monitor from wrapping your content with a p tag.
Here is a structure example:
<multiline>
<div>
Your Content Goes Here.
</div>
</multiline>
Put
valign="top"
on your TD for the text. If the email client doesn't recognize CSS it should recognize the standard HTML attribute.
Also, if that doesn't fix it, can you edit your Q and add the definition for "title" CSS definition that you are using on that .
I'm assuming your referring to the text inside the H2 tag.
Create a class for the <h2>
.noPad {
padding-top: 0px;
}
Or don't use the H2 and just use a span or div element.
It could just be the line-height of the text as opposed to margin/padding - check that as well
I'm working with Jasperrerports 3.5.1 and I have a html-styled text that I need to be printed in a PDF with the proper styles.
In the cell I want to print the styled text I have the markup property set to "HTML". I have created a this sample text:
<p>
<table border="0">
<tbody>
<tr>
<td>wewewe</td>
<td>eeeee</td>
</tr>
<tr>
<td>qwewewq</td>
<td>3333333</td>
</tr>
</tbody>
</table>
</p>
<p>4444</p>
but in the PDF it is printed as if, without any formatting.
Do you know how can I use html styles here, because using tables inside cells are one of the client's requeriments.
Thanks.
I know this question is old, but JasperReports only supports a small, very small set of HTML tags for styling. The list I found of those tags is:
b
br
font
u
i
sup
sub
li
See here for more info.
First, I'm not sure if case matters but make sure the value of the markup attribute for your textElement element in your JRXML is set to "html" (lowercase).
Second, the purpose of the markup attribute is to format text using HTML, it is meant to make text bold, italic, change font color or size, etc. Creating a table is not what this attribute is for.
You can create tables using standard JRXML, without resorting to embedding HTML, an example is bundled with the JasperReports download under ${JASPERREPORTS_HOME}/demo/samples/table
You can do something like
<textField >
<reportElement x="7" y="10" width="543" height="53"/>
<textElement markup="html">
<font size="10" pdfFontName="Helvetica" isPdfEmbedded="true"/>
</textElement>
<textFieldExpression class="java.lang.String"><![CDATA[$F{myElementName}]]></textFieldExpression>
</textField>
Then you can pass the following string programatically
<p style="color:red">
<table border="0">
<tbody>
<tr>
<td style="border: 1px solid">wewewe</td>
<td style="border: 1px solid">eeeee</td>
</tr>
<tr>
<td style="border: 1px solid" >qwewewq</td>
<td style="border: 1px solid">3333333</td>
</tr>
</tbody>
</table>
</p>
<p>4444</p>
I haven't found yet how to create css to apply it using classes inside a jasperreport text element.