I have a asp.net mvc 3 view for printing a table. I would like a printable view pop-up.
The resulting HTML print is compatible/formatted for 8.5x11 paper.
The entire page only contains one table, which possible has many rows. Therefore it has many pages, basically.
Export to pdf is fine.
Should I add CSS or other tricks?
<body>
<table class="ui-widget">
<thead>
<tr>
<td class="ui-widget-content">
ID
</td>
<td class="ui-widget-content">
PIN
</td>
<td class="ui-widget-content">
First Name
</td>
<td class="ui-widget-content">
Middle Name
</td>
<td class="ui-widget-content">
Last Name
</td>
</tr>
</thead>
#foreach (var r in ViewBag.PINS)
{
<tr>
<td class="ui-widget-content">#r.IDNumber
</td>
<td class="ui-widget-content">#r.PIN
</td>
<td class="ui-widget-content">#r.FirstName
</td>
<td class="ui-widget-content">#r.MiddleName
</td>
<td class="ui-widget-content">#r.LastName
</td>
</tr>
}
</table>
Have you thought about a print.css file? You can style the page then to fit on 8.5x11" (this is the easiest and fastest way). If you need it exactly right then you should use a ASP.net PDF export library.
Related
I have the following handlebars file:
<table>
<tbody>
{{#name_days}}
<tr>
<td class="name-days-country">
<span class="flag-sm flag-sm-{{flag}}"></span>
<span class="name-days-country-name">{{country}}</span>
</td>
<td class="name-day-dates">
{{#each months}}
<td class="name-days-tile">
<span>{{this}}</span>
</td>
{{/each}}
</td>
</tr>
{{/name_days}}
</tbody>
</table>
I'm expecting <td class="name-days-tile"> to be inside <td class="name-day-dates"> but it renders as:
<td class="name-day-dates"></div>
<td class="name-days-tile"></div>
Why isn't it rendering as expected?
The issue ended up being that one cannot put a td inside a td.
While one can manually do it, without it being valid in plain HTML, handlebars detected the issue and automatically applied a closing </td> before adding another opening <td> during the render process.
I'm using a ng-repeat to loop through some data to show on a table. I want the format to be 2 columns and 1 row under the 2 columns...
Right now I have:
<table class="table table-borderless table-striped">
<tbody>
<tr ng-repeat="file in files">
<td>{{file}}<br>
</td>
<td>{{file.name}}</td>
<td>{{file.error.message}}</td>
</tr>
</tbody>
</table>
For example:
Use ng-repeat-start and ng-repeat-end...
<tr ng-repeat-start="f in files">
<td>{{file}}</td>
<td>{{file.name}}</td>
</tr>
<tr ng-repeat-end="">
<td colspan="2">
{{file.error.message}}
</td>
</tr>
Demo (using sample user data)
I've created a website here and in the Kontakt section I added opening hours but I couldn't figure out how to code it for the days to align nicely and the other information also.
so I just put a PNG there to simulate the look I was looking for.
Nevertheless I would like to know how to code it properly because when I view it on a bigger screen or on a tablet device it messes with the bracket it's in because it isn't even with the bracket next to it.
The following code is the code from the left bracket where the text is, and it's working perfectly but I don't know how to code opening hours correctly.
<section id="blog-area">
<div class="container">
<div class="row text-center inner">
<div class="col-sm-6">
<div class="blog-content"><br><br>
<h2 class="feature-content-title green-text">+ 421 903 977 345</h2>
<p><strong>Iľja Takács</strong><br><br>
iljatakacs#gmail.com<br>
facebook #lakovnaturen<br><br>
Tureň 390, 903 01 Senec | Areál bývalého PD Tureň</p><br>
</div>
</div>
Link to the png image: http://testinglakovna.borec.cz/img/otvaraciehodiny.png
I suggest that you make a table. This way you can define every width to the pixel and make sure everything is aligned the way you displayed on the website.
I made a simple JSFiddle hope that helps.
<table class="tg">
<tr>
<td class="day">Po</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">Ut</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">St</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">St</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">Pia</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">So</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">Ne</td>
<td class="extra" colspan="3">Na objednavku</td>
</tr>
</table>
Jsfiddle
As per new email rules (thanks Microsoft and Google) all margins are stripped from your HTML. So using margin: 0 auto is out for a solution.
The structure is:
<table>
<tr>
<td align="center">
Button
</td>
</tr>
Now I could add yet another table inside the td but it is already like the 2nd nested table and I'm hoping there is a different solution other then nesting another table. The align="center" doesn't work.
Try this code, I'm using this code to send html email and it works fine for gmail, outlook
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
Button
</td>
</tr>
</table>
Also, you can check allow css property for html email here: https://www.campaignmonitor.com/css/
Cuz CSS in email is dangerous... buh BAM. ;D
<table width="100%">
<tr>
<td align="center">
Button
</td>
</tr>
</table>
Old, school, but why not just use blank td's on each side? Ah, it's the 90's again!
<table>
<tr>
<td width="25%"></td>
<td width="50%">
Button
</td>
<td width="25%"></td>
</tr>
</table>
Hotmail does not support margin in HTML emails. Is there an alternative?
I would suggest use tables and play with the width of columns. HTML emails are sometimes better with tables. Also, you can take a look at an email you have in your inbox that does what you want and inspect source code.
As this answer seems a little vague I would also like to point to a very complete answer which covers in more details html emails.
Note:
When it comes to email HTML, note that all best practices from web development goes out the window.
Here is an example using tables,
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width:600px;margin:0 auto;background:#FFF;">
<tr>
<td colspan="5" style="padding:15px 0;">
<h1 style="color:#000;font-size:24px;padding:0 15px;margin:0;">Header</h1>
</td>
</tr>
<tr>
<td style="width:15px;"> </td>
<td style="width:375px;">
Left Column Content
</td>
<td style="width:15px;"> </td>
<td style="width:180px;padding:0 0 0 0;">
Sidebar Content
</td>
<td style="width:15px;"> </td>
</tr>
<tr>
<td colspan="5" style="padding:15px 0;">
<p style="color:#666;font-size:12px;padding:0 15px;margin:0;">Footer</p>
</td>
</tr>
</table>
Live here http://jsfiddle.net/Wr76m/
I was able to get away with transparent horizontal bars, using padding to modify the height. For example:
<hr style="border: transparent; padding: 1px;">