I am having issues using the HTML Renderer properly. It generates the PDF, but for some reason, when I have a colspan of 2, it seems to ignore this.
Here is the entire HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Receipt</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
.invoice-box table tr.top table tr td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table tr td {
width: 100%;
display: block;
text-align: center;
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="" style="width:100%; max-width:300px;">
</td>
<td>
Order number #: xxxxxxxx<br>
Order Date: February 26 2018
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
CompanyS<br>
address<br>
state
</td>
<td>
Contact<br>
Email
</td>
</tr>
</table>
</td>
</tr>
<tr class="details">
<td>
</td>
<td>
</td>
</tr>
<tr class="heading">
<td>
</td>
<td>
</td>
</tr>
<tr class="item">
<td>
</td>
<td>
</td>
</tr>
<tr class="total">
<td></td>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
And here is the code to get the HTML:
var emailContentUrl = url;
var html = FetchResponseHtml(emailContentUrl);
var pdf = PdfGenerator.GeneratePdf(html, PageSize.A4);
FetchResponseHtml:
public string FetchResponseHtml(string emailContentUrl)
{
var request = (HttpWebRequest)WebRequest.Create(emailContentUrl);
var response = (HttpWebResponse)request.GetResponse();
var responseHtml = "";
if (response.StatusCode == HttpStatusCode.OK)
{
var receiveStream = response.GetResponseStream();
StreamReader readStream = null;
if (response.CharacterSet == null)
{
readStream = new StreamReader(receiveStream);
}
else
{
readStream = new StreamReader(receiveStream, Encoding.GetEncoding(response.CharacterSet));
}
responseHtml = readStream.ReadToEnd();
response.Close();
readStream.Close();
}
return responseHtml;
}
But for some reason, when the PDF is generated, the PDF only has the company info. There is no Order Number/Order Date nor any contact info.
Is HTML Renderer ignoring extra colspans, or why does this happen?
The HTML code seems to be valid.
Maybe you are breaking the syntax while adding Order related information.
Related
This question was migrated from Super User because it can be answered on Stack Overflow.
Migrated 28 days ago.
I'm currently developing an app in .NET c# for my own company and I'm facing some trouble when trying to use a HTML template to send a automated e-mail to my users with my app in c#.
C# Code to send e-mail using Gmail API
public bool sendEmail(SendEmailModel email)
{
try
{
UserCredential credential = loadCredentials();
string message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
var service = new GmailService(new BaseClientService.Initializer() { HttpClientInitializer = credential, ApplicationName = ApplicationName });
var msg = new Google.Apis.Gmail.v1.Data.Message();
msg.Raw = Base64UrlEncode(message.ToString());
service.Users.Messages.Send(msg, "me").Execute();
return true;
}
catch(Exception ex)
{
return false;
}
}
string Base64UrlEncode(string input)
{
var data = Encoding.UTF8.GetBytes(input);
return Convert.ToBase64String(data).Replace("+", "-").Replace("/", "_").Replace("=", "");
}
HTML Template
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #f1f1f1;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
img {
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
.im {
color: inherit !important;
}
img.g-img + div {
display: none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<style>
.primary{
background: #17bebb;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #f7fafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding: 10px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 25px;
background: #e77d1a;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 25px;
background: transparent;
border: 1px solid #e77d1a;
color: #e77d1a;
}
.btn.btn-black-outline{
border-radius: 0px;
background: transparent;
border: 2px solid #000;
color: #000;
font-weight: 700;
}
.btn-custom{
color: rgba(0,0,0,.3);
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Poppins', sans-serif;
color: #000000;
margin-top: 0;
font-weight: 400;
}
body{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #17bebb;
}
table{
}
.logo h1{
margin: 0;
}
.logo h1 a{
color: #17bebb;
font-size: 24px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.hero{
position: relative;
z-index: 0;
}
.hero .text{
color: rgba(0,0,0,.3);
}
.hero .text h2{
color: #000;
font-size: 34px;
margin-bottom: 0;
font-weight: 200;
line-height: 1.4;
}
.hero .text h3{
font-size: 24px;
font-weight: 300;
}
.hero .text h2 span{
font-weight: 600;
color: #000;
}
.text-author{
bordeR: 1px solid rgba(0,0,0,.05);
max-width: 50%;
margin: 0 auto;
padding: 2em;
}
.text-author img{
border-radius: 50%;
padding-bottom: 20px;
}
.text-author h3{
margin-bottom: 0;
}
ul.social{
padding: 0;
}
ul.social li{
display: inline-block;
margin-right: 10px;
}
.footer{
border-top: 1px solid rgba(0,0,0,.05);
color: rgba(0,0,0,.5);
}
.footer .heading{
color: #000;
font-size: 20px;
}
.footer ul{
margin: 0;
padding: 0;
}
.footer ul li{
list-style: none;
margin-bottom: 10px;
}
.footer ul li a{
color: rgba(0,0,0,1);
}
#media screen and (max-width: 500px) {
}
</style>
</head>
<center style="width: 100%; background-color: #f1f1f1;">
<div style=" display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"></div>
<div style=" max-width: 900px; margin: 0 auto;" class="email-container">
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #dedede; margin: auto;">
<tr>
<td valign="middle" class="hero bg_white" style="background-color: #dedede; padding: 2em 0 2em 0;">
<div class="text-author" style="border-radius: 20px;background-color: #ffffff;border-color: #ffffff; ">
<table table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="{LOGO_1}" style="height: 100px; width: auto;">
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 600; font-size: 25px; color: #171717;">Olá,</h3>
<span class="position">{content}</span>
</td>
</tr>
<tr >
<td style="text-align: center;">
<p><a class="btn btn-white-outline" style="width: 94%;">{btn_1_content}</a></p>
<p>{btn_2_content}</p>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div style="height: 10px;"></div>
<span class="position" style="color: #dbdbdb;">Este é um e-mail enviado automaticamente.</span>
<div style="height: 10px;"></div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="separator" style="background-color: #d7d7d7; height: 1px;"></div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div style="height: 20px;"></div>
<span class="position" style="color: #dbdbdb;">Se você já realizou o pagamento desse boleto desconsidere esse e-mail.</span>
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 250; font-size: 16px; color: #171717;">Abraços,</h3>
<h3 class="name" style="font-weight: 600; font-size: 16px; color: #171717;">Equipe Acalanto.</h3>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div>
<img src="{LOGO_2}" height="60px">
<h3 style="color: #898989; font-size: 14px;">© Organização Diamante LTDA</h3>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I have no idea on how to use any kind of template with Gmail API. If Gmail API isn't the "go" for this case please let me know, I don't mind to use othe types of e-mail services but I really like Google stuff, but, in this case they don't have any info on .NET c# or even on how to use templates.
SOLUTION
After some thought I found the solution.
In the line of code:
tring message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
I just replaced <h1>{email.content}</h1> with File.ReadAllText("PATH_TO_HTML_FILE") and that was it. Sorry for the dumb question. In my opinion, Google should update their Gmail API documentation and examples, because I don't think anyone will go to the trouble of implementing a e-mail api and e-mail system to send simple e-mails with plain text and images.
I am working with a .NET Core 6 Web API and I am using Rotativa to generate reports. I am currently renouncing the creation of a dynamic grid with the data that comes from a stored procedure which is called in the controller and then I pass its result to said method that passes and then iterates and builds the html.
I'm building everything on the API side in C#.
I attach the code where I put together the HTML
public string GetHtml(List<ListaMovimientosArea> movimientosArea)
{
string tablaHtml = "";
foreach (var movArea in movimientosArea)
{
tablaHtml += String.Format
("<tr>" +
"<td colspan=\"1\">{0}<td>" +
"<td colspan=\"2\">{1}<td>" +
"<td colspan=\"2\">{2}<td>" +
"<td colspan=\"3\">{3}<td>" +
"<td colspan=\"3\">{4}<td>" +
"<td colspan=\"1\">{5}<td>"+
"</tr>",
movArea.MovimientoId,
movArea.NombreArea,
movArea.FechaMovimiento,
movArea.TipoMovimientoNombre,
movArea.NombrePersona,
movArea.MontoTotal
);
}
string html = #"<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.invoice-box.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.invoice-box.rtl table {
text-align: right;
}
.invoice-box.rtl table tr td:nth-child(2) {
text-align: left;
}
tr.spaceUnder > td {
padding-top: 10em;
}
tr.border > td {
border: solid;
border-width: 1px 0;
}
</style>
</head>
<body>
<div class=""invoice-box"">
<table border=""1"" cellpadding=""0"" cellspacing=""0"">
<tr class=""top"">
<td>
<table border=""1"">
<tr>
<td class=""title"">
<img THERE IS A IMAGE>
</td>
</tr>
</table>
</td>
</tr>
<tr class=""information"">
<td>
<table>
<tr>
<td>
Caritas Argentina<br />
Diocesana Villa Maria<br />
Tel/Fax (0353) 4530388/4528919 <br />
Mexico 60 - 5900 Villa Maria (Cba.) <br />
e-mail: caritasvillamaria#hotmail.com
</td>
</tr>
</table>
</td>
</tr>
<table border=""1"">
<tr class=""heading"">
<td colspan = ""1"">Codigo</td>
<td colspan = ""2"">Area</td>
<td colspan = ""2"">Fecha Mov.</td>
<td colspan = ""3"">Tipo Mov.</td>
<td colspan = ""3"">Persona</td>
<td colspan = ""1"">Monto</td>
</tr>" +
tablaHtml
+
"</table>" +
"<tr class=\"total\"\">\r\n " +
"<td></td>\r\n\r\n" +
" <td>Total: $385.00</td>\r\n" +
"</tr>\r\n" +
"</table>\r\n" +
" </div>\r\n" +
"</body>\r\n" +
"</html>";
return html;
}
}
I attach the image of how it looks, I put the border in 1 to see why the problem but I couldn't solve it.
I attach the image of what the pdf looks like
The tests I did was to modify the style but I did not get a result.
The below is the css and asp code for the gridview.
The border are spreading out then expected.
I tried setting Width=100% which worked, but I want the border to follow the size of grid instead spreading the grid view to occupy space unnecessarily.
This is an Asp Gridview with css for rounding corners
CSS:
.rounded-corners {
border: 1px solid #565656;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
}
.Grid td, .Grid th {
border: 1px solid #565656;
text-align: center;
padding-top: 3.5px;
padding-bottom: 3.5px;
font-size: medium;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
Source Code:
<div class="rounded-corners">
<div>
<table class="Grid" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<tbody>
<tr>
<th>Description</th>
<th>Time</th>
<th>Time</th>
</tr>
<tr>
<td>abc</td>
<td>07:30</td>
<td>07:30</td>
</tr>
<tr>
<td>def</td>
<td>07:30</td>
<td>07:30</td>
</tr>
<tr>
<td>ghi</td>
<td>07:30</td>
<td>07:30</td>
</tr>
</tbody>
</table>
</div>
</div>
I think the grid is rendered like this:
<div class="Grid" id="XXXX_gv1">
<table>
<tr><th>column 1</th><th>column 2</th><th>column 3</th></tr>
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr>
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr>
</table>
</div>
so you could then style it:
.Grid {
display:inline-block; /* trick to not take 100%. */
/* alternatively: you could border .Grid>table */
border-radius:8px;
}
.Grid>table>tbody>tr:first-row {
/* special stuff for the first row here */
}
Here is my code, in this i'm seeing a table filled with data but no separators are visible like i want separator b/w rows and columns. How to add separator in asp.net html table. How to update in css file to get separator look
<table class="tableStyle" id="Table1">
<thead><tr><th id="Th1" style="background-color:#507CD1;width:150px;font-weight:bold;color:White"><div>Number</div></th>
<th id="Th2" style="background-color:#507CD1;width:150px;font-weight:bold;color:White">Type</th><th id="Th3" style="background-color:#507CD1;width:150px;font-weight:bold;color:White">Name</th>
</tr></thead>
<%
for(int i=0 ;i<10;i++)
{
String id = i.ToString();
%>
<tr><td headers="Th1" style="background-color:#EFF3FB;">Hello world
</td><td headers="Th2" style="background-color:#EFF3FB;">Hello world</td>
<td headers="Th3" style="background-color:#EFF3FB;"></td></tr>
<%}
%>
</table>
Here is the css example. SEE DEMO
If your redered HTML are following.
<table>
<thead>
<tr>
<th>Number</th>
<th>Type</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
CSS
table
{
border-collapse:collapse;
}
table, th, td
{
border: 1px solid black;
background-color:#EFF3FB;
}
table thead th {
background-color:#507CD1;width:150px;font-weight:bold;color:White
}
http://jsfiddle.net/E8W2F/
I solved by adding border: 1px solid #C1C1C1; in my rows i.e
style="background-color:#EFF3FB;border: 1px solid #C1C1C1;"
You can use HTML and CSS to style your tables
Here is some code please (the HTML and the CSS could be well formatted, but this is just a sample code)
HTML AND CSS CODE:
<style>
.datagrid table { border-collapse: collapse; text-align: left; width: 100%; }
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.datagrid table td, .datagrid table th { padding: 3px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 4px solid #A8A8A8; }
.datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00496B; border-left: 4px solid #E1EEF4;font-size: 12px;border-bottom: 2px solid #141BF4;font-weight: normal; }
.datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }
.datagrid table tfoot td div { border-top: 1px solid #006699;background: #E1EEF4;} .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; }
.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }
.datagrid table tfoot li { display: inline; }
.datagrid table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; }.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none;border-color: #006699; color: #FFFFFF; background: none; background-color:#00557F;}div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; }
</style>
<div id="all" class="datagrid" style="margin-top: 33px;">
<table>
<thead>
<tr>
<th>Title</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<div id="no-paging" style="display: none;">
</div>
<div id="paging">
<ul>
<li>
<span>Previous</span>
</li>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
<li>
<span>Next</span>
</li>
</ul>
</div></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr class="alt">
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr>
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr class="alt">
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr>
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
</div>
Another tip: There is a website that visually and easilly generates CSS styles for tables. Go to http://tablestyler.com/ and enjoy.
I am working on a project, but having problem with applying CSS only to navigation bar. My project contains
master page
home.aspx
gallery.aspx
When I apply menu.css file to navigation bar on master.page it effects rest of the tables as well as other content pages (home.aspx and gallery.aspx) my code looks like following:
master.page
<body style="background-image: url('/WebSite5/bacground/Fruit-drinks-vector-pptbackgrounds.jpg')">
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<table align="center" class="style1">
<tr>
<td style="text-align: center">
<img alt="" class="style2" src="bacground/logo.png" />
</td>
</tr>
<tr>
<td>
<uc1:menu ID="menu1" runat="server" />
</td>
</tr>
</table>
</asp:ContentPlaceHolder>
</div>
<table class="style3">
<tr>
<td style="text-align: center">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
menu.ascx
<table class="style1">
<tr>
<td>
<ul id="nav">`enter code here`
<li class="home" aria-orientation="horizontal">Home</li>
<li class="Gallery">Gallery</li>
<li class="events">Events</li>
<li class="About US">About US</li>
<li class="contact">Contact</li>
</ul>
</td>
</tr>
</table>
menu.css
#ul li {
list-style: none;
height: 44px;
float: left;
padding: 10px 5px;
width: 175px;
}
#ul li a {
width: 146px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
#li:nth-child(1) a {
border-color: #636393;
}
#li:nth-child(2) a {
border-color: #B5222D;
}
#li:nth-child(3) a {
border-color: #D4953C;
}
#li:nth-child(4) a {
border-color: #609491;
}
#li:nth-child(5) a {
border-color: #87A248;
}
#li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
}
#li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
}
#li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
}
#li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
}
#li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
}
Please help me.
To apply CSS to one element use id, ex. then in CSS:
#nav {
color:yellow;
}
#nav li {
font-size:19pt;
}
Rest of the elements (without id==nav) will not be affected.
Example:
http://jsfiddle.net/igos/tJWq6/