I have a <table> in an HTML template, in which I want to space cell only horizontally. I have tried using <div>s is not an option as email clients are harsh on styling. Using cellspacing spaces cells equally vertically, which is unwanted.
I am open for dropping table and use divs or any other tag, I couldn't find any. I basically have only two cells (and only one row) in the table, and want to space them away.
Is there any way of doing this?
I found a way of doing this. I just added another <td width="40%"> and it worked.
Css can achieve it:
<style>
td
{
padding-left:70px;
padding-right:70px;
}
</style>
Or if style tag doesn't work here is the inline CSS to do the same-
<td style="padding-left:70px; padding-right:70px;">
Demo
Related
I have a table which is OK in web pages, but when printing my table (ctrl+p) it breaks not the way I want. The last row of the first page splits with the part of the row on the first page and the other part of the row on the second page. So, is there any way to overcome the problem, the rows can have different content and size. I also tried this properties
page-break-before/after: auto. page-break-inside:avoid;
but with no result. Is there any way to break the table and move the part of the table to the next page without splitting the last row into two parts for print media? Any help will be appreciated.
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<th><span>Firstname</span></th>
<th><span>Lastname</span></th>
<th><span>Points</span></th>
</tr>
<tr>
<td><span>Jill</span></td>
<td><span>Smith</span></td>
<td><span>50</span></td>
</tr>
<tr>
<td><span>Eve</span></td>
<td><span>Jackson</span></td>
<td><span>94</span></td>
</tr>
<tr>
<td><span>John</span></td>
<td><span>Doe</span></td>
<td><span>80</span></td>
</tr>
/*here I have many <tr> elements*/
</table>
</body>
</html>
If I understand correctly, you want your table to break only between rows and not within them. You can accomplish this in Firefox and Internet Explorer with the following css rule:
tr {page-break-inside: avoid;}
Unfortunately, that doesn't work in other popular browsers, such as Chrome.
As has been suggested, you can prevent page breaks within the content of an individual cell by wrapping it in a div that has "page-break-inside: avoid;" set on it, but if the content height varies within the row, you'll still end up with parts of the row on two different pages.
If you really want to solve this problem and are willing to throw some javascript at it, I have posted a solution here that should do the trick.
You can request a page break, which will be invisible on the screen, but will force the element to a new page when you print. But the rules are more subtle than you might expect.
The CSS property page-break-before:always can only by applied to a block element. Not an inline, or anything odd like a table-row or a list-item. So do not style the row or cell, nor even a <tbody> or a <br/>. And it cannot be an element that the browser is allowed to omit, so you cannot just throw in an empty <div> with the style on it. One has to add a <div> or <p> around the first cell contents, for instance, to give the style.
Likewise page-break-after:always can be applied to something similar at the end of the previous row. I find this totally annoying, as what I always want to protect is a row, or a grouping.
Some browsers may also want you to change the style of your table to page-break-inside:auto, as the default style for a table is often already page-break-before:avoid.
Since it is the default style, adding it does not help. The browser is already avoiding breaking your table as much as it is willing to. But failing to remove it easily makes the other options useless, especially in Chrome.
Need assistance adding padding to the main body text of this emailer so the text does not look quite so tight to the border.
It's probably a simple solution but I can't work out which table to add the cell padding property to.
live version -> http://garyrevell.co.uk/mercy2013/2013-temp/alt-april-mailer/index-purple-final.html
Pastebin of the code -> http://pastebin.com/PAbYgqXN
Help would be much appricated.
Always add padding the the table cell that the content is in. eg:
<td style="padding:30px;">
<singleline>your content</singleline>
</td>
It looks like your content however is living outside of tables in divs instead. You should lose the divs and put everything into td sections. Also, don't have a table next to text inside a parent td, instead have a table cell for each (use table rows if stacking them).
Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/
I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.
What have I done wrong in the example, and must I change to make them on the same margin-top line?
Thanks, I have tried to be as clear as possible.
What I mean is that they should share the same margin-top line, but they don't, and what must I do to fix this?
You just need something like:
td { vertical-align: top;}
Example fiddle
This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.
Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.
eg.
<div class="stylized myform">
Just add to your css:
td {vertical-align:top;}
Adding valign="top" will make the column on the left align to the top of the row.
The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.
in HTML if I write <td></td> it is an empty column. how can I specify how much space it will take? I want an empty column like that to take more space than its default..the goal is I want to have two text boxes in the same row of my page like this:
TextBox1 somespace TextBox2 and for "somespace" I thought maybe I can use that <td></td> but it does not have enough spacing...so if you also have a better idea for how I can reach my main goal that would be cool.
thanks.
Use a CSS style:
td { width:42px; height:42px; }
Though, on reading your question it seems I would have to encourage you not to implement this to achieve what you desire. Instead, style the textbox controls to use a margin:
input[type="text"] { margin:12px; }
There is the possibility of separating space-wise using non-breaking white-space ( ), but I would discourage this, too, as it would be being used in the mark-up structure as a means of layout and design, when this should be dictated by abstracted styling.
put a margin on your textboxes that is the space you want to be between them
have a look here, you can play with the margin to decide how much space you need
http://jsfiddle.net/tzUph/
You can use CSS to target the <td> and specify a width parameter.
td {
width:20px;
}
Place a div inside the td and set the width on the div style. I found that simply setting width on td doesnt work
So I have a table.
First thing I want to do is put some space between two rows of the table. I tried inserting a <br /> in between the two <tr> elements, but that only put space above the ENTIRE table (don't know why).
Second thing I want to do is center a picture in a column so it lines up in the middle of the text in the column below it. I tried placing an align=center on the <td> element to no avail.
Have you tried changing the CSS for the table rows and possibly adding a : padding-bottom: x px; or margin-bottom: x px; to gain the space that you would like in the table.
Also - I believe that you would need your "align=center" property to be a "text-align: center".
Putting spaces between the table rows won't work. All that content will be placed above or below the table. Styling the table must be done using CSS. Try something like:
td{
padding: 5px 0;
}
Use CSS, as HTML is for structure. Here is a link to W3C tutorial on styling tables with css In fact, if you are using tables for positioning, that is bad practice too - again use CSS.