How to change the color of the first line? - responsive-design

I'm trying to achieve a colored background for my table. I want that when it is on its responsive form, the first lines that are selected in the picture (the lines that start with this word "Caracteristiques") have a specific background color to structure my table, is this possible?
body{font-family:'Varela Round';}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
.responsive-table-line td:before { content: attr(data-title); }
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display:none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align:right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height:100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:left;
background-color:#f8f8f8;
padding:2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>

You can do what you are trying to do with :pseudo, I have added just two rules
body {
font-family: 'Varela Round';
}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
/**** Added CSS Rules ****/
tr:nth-child(1n+1) td:first-child {
background: red;
}
tr:nth-child(1n+1) td:first-child:before {
background: red;
}
/**** End of Added CSS Rules ****/
.responsive-table-line td:before {
content: attr(data-title);
}
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display: none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align: right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow: hidden !important;
text-align: left;
background-color: #f8f8f8;
padding: 2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
Hope this helps :)

Related

Selectpdf - cannot remove top margin on page

I am using SelectPdf, and when configuring my converter to convert the string to a pdf, my pdf keeps ending up generating some margin on the top of the page.
My converter:
private Stream ConvertToPdf(string data)
{
HtmlToPdf converter = new HtmlToPdf();
converter.Options.PdfPageSize = PdfPageSize.A4;
converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.NoAdjustment;
converter.Options.DisplayFooter = true;
converter.Options.DisplayHeader = true;
converter.Options.MarginTop = 0;
converter.Options.MarginBottom = 0;
converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;
converter.Options.CssMediaType = HtmlToPdfCssMediaType.Screen;
converter.Options.EmbedFonts = true;
PdfDocument doc = converter.ConvertHtmlString(data);
// create memory stream to save PDF
MemoryStream pdfStream = new MemoryStream();
// save pdf document into a MemoryStream
doc.Save(pdfStream);
pdfStream.Seek(0, SeekOrigin.Begin);
return pdfStream;
}
In my template, I have no apparent margin in the top of the page, so I am, so far, unable to figure out where it is coming from.
My template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
.red-color {
color: red;
margin-left: 10px;
}
p.red-color {
margin-top: 0;
font-weight:800;
}
p.red-color:first-of-type {
margin-bottom: 0;
}
h1.red-color {
margin-bottom: 10px;
margin-top:0;
}
h2.red-color {
margin-bottom: 20px;
}
#wrapper {
position: relative;
width:750px;
height:1050px;
}
.image-wrapper {
width: 96%;
height: 350px;
margin-left: 2%;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#info-banner {
position: absolute;
bottom: 0;
background-color: red;
width: 96%;
margin-left: 2%;
height: 125px;
}
#info-banner #banner-left {
float:left;
width:40%;
}
#info-banner #banner-right {
float:left;
width:60%;
}
#info-banner #banner-left a {
display: block;
text-align: center;
margin-top: 20px;
color: white;
text-decoration: none;
}
#info-banner #banner-left a img{
width:50px;
}
#info-banner #banner-right p:first-of-type {
margin-top:20px;
}
#info-banner #banner-right p {
margin: 0;
color: white;
padding-bottom: 5px;
font-size: 14px;
}
.amount {
text-align:left;
padding-left:5px;
}
.name {
}
.price {
}
table th {
text-align: left;
}
td {
padding: 10px 0;
}
table {
width: 96%;
margin-left:2%;
border-collapse: collapse;
}
.top-border {
border-top: 2px solid black;
}
.heavy-font {
font-weight: 800;
}
.less-spacing td{
padding:5px 0;
}
</style>
</head>
<body>
<div id="wrapper" style="page-break-after: always">
<h1 class="red-color">Name</h1>
<div class="image-wrapper" style="background-image: url('##EventImage##');"></div>
<h2 class="red-color">##Title##</h2>
<p class="red-color">your ticket:</p>
<p class="red-color">Print it.</p>
<table>
<tr>
<th>Amount</th>
<th>name</th>
<th>Price</th>
</tr>
<tr class="top-border">
<td class="amount">##Amount##</td>
<td class="name">
##Title##<br />
Adresse: ##Address## <br />
Dato: ##Date##<br />
Tidspunkt: ##Time##
</td>
<td class="price">##Price## USD</td>
</tr>
<tr class="top-border ">
<td class="amount"></td>
<td class="name">In Total</td>
<td class="price">##ProductTotalPrice## USD</td>
</tr>
<tr class="less-spacing">
<td class="amount"></td>
<td class="name">Total ex. tax:</td>
<td class="price">##ProductTotalExTax## USD</td>
</tr>
<tr class="less-spacing">
<td class="amount"></td>
<td class="name">shipping: </td>
<td class="price">##ShippingPrice## USD</td>
</tr>
<tr class="less-spacing">
<td class="amount"></td>
<td class="name">Subtotal ex. tax</td>
<td class="price">##PriceNoTax## USD</td>
</tr>
<tr class="less-spacing">
<td class="amount"></td>
<td class="name">tax</td>
<td class="price">##Tax## USD</td>
</tr>
<tr class="top-border">
<td class="amount"></td>
<td class="heavy-font name">Total:</td>
<td class="heavy-font price">##FinalPrice## USD</td>
</tr>
</table>
<div id="info-banner">
<div id="banner-left">
<img src="facebook-icon.png" /><br />Find us on facebook
</div>
<div id="banner-right">
<p>Name</p>
<p>Address</p>
<p>Second Address</p>
<p>Phone: 0000000000 Email: info#test.com</p>
</div>
</div>
</div>
</body>
</html>
When I generate this, I have no issues making it a pdf, but on each page it appears with a top margin, or some sort of a header.
Setting these values appears to have solved my issue.
converter.Options.WebPageHeight = 1050;
converter.Options.WebPageWidth = 750;
and i had duplicated values in these, which said true.
converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;

asp gridview css border goes out of scope

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 */
}

How to save necessary information of HTML file to string variable

A HTML file is generated by Android MobileBiz Pro invoice app. I'm trying to make software for print HTML based invoice via receipt printer
I need to save necessary information of HTML file to string variable as mentioned below. I tried using IndexOf method. but it's not working for me. How can I get this information using visual c#?
string subtotal = 2,976.00;
string total = 2,976.00;
string payment= 2,760.00;
string balance= 216.00;
This is an example of the HTML code:
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
This is a complete HTML code of HTML file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font-family:Verdana, Geneva, sans-serif;
font-size: 8pt;
padding: 0 50pt 0 50pt;
}
table td, table th, table.sales th, table td.footer-text {
font-size: 8pt;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
color:chocolate;
text-transform:uppercase;
font-size: inherit;
font-size: 1.5em;
}
h2 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:0px;
margin-bottom:0px;
color:chocolate;
text-transform:uppercase;
font-size: 1.3em;
}
h3 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
}
table.sales td {
padding: 4px 10px 4px 10px;
}
table.sales th {
padding: 5px 10px 5px 10px;
background-color:#CCC;
}
tr.saleline td {
border-bottom-color:chocolate;
border-bottom-width: 1pt;
border-bottom-style: solid;
vertical-align: top;
}
.signature {
display: none;
}
.horizontal-line {
border: 0;
height: 4pt;
color:chocolate;
background-color: chocolate;
}
.total {
font-weight:bold;
font-size:1.1em;
background-color:#CCC;
}
.block1 {
text-align:left;
vertical-align:bottom
}
.block2 {
text-align:right;
vertical-align:bottom
}
.block3 {
text-align:left;
vertical-align:top;
}
.block4 {
text-align:left;
vertical-align:top;
}
.block5 {
text-align:right;
vertical-align:bottom;
}
.block6 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block7 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block8 {
text-align:left;
vertical-align:bottom;
}
.block9 {
text-align:center;
vertical-align:bottom;
}
.block10 {
text-align:right;
vertical-align:bottom;
}
.block11 {
text-align:left;
padding: 25px 0 15px 0;
}
.extracols {
border-style:solid;
border-color:gray;
}
table.extracols {
border-top-width: 1pt;
border-right-width: 0;
border-bottom-width: 1pt;
border-left-width: 1pt;
border-collapse:collapse;
margin: 0 0 15pt 0;
}
table.extracols th {
padding: 5px 10px 5px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#CCC;
}
table.extracols td {
padding: 4px 10px 4px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#FFF;
}
#footer {
margin-top: 35px;
}
.footer-text {
font-size: inherit;
font-size: 0.97em
}
</style>
</head>
<body style="padding: 20 20 20 20">
<table width="100%">
<tr>
<td style="padding-bottom:20px"><table width="100%">
<tr>
<td style="text-align:left;"></td>
<td class="block2" align="right"><h3>Y.P.Brothers</h3>
No:55/B,<br/>Samagipura,<br/>Sewanagala.
<br/>077-6977139
<br/>mecduino#gmail.com
<br/>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><hr class="horizontal-line"/></td>
</tr>
<tr>
<td><table width="100%">
<tr>
<td style="padding:10px 0 20px 0;"><table width="100%">
<tr>
<td width="33%" class="block3"><strong>Bill To</strong><br />
ANUSHA SURIYA<br/>
</td>
<td class="block4"><strong></strong><br />
</td>
<td class="block5" align="right"><h1>invoice #1</h1>
<b>Date</b>: Oct 9, 2015
<br/><b>Due Date</b>: Oct 9, 2015
</td>
</tr>
</table></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td><table width="100%" class="sales">
<!-- Headers -->
<tr>
<th align="center">Qty</th> <th align="center">Item</th> <th align="right">Price</th> <th align="right">Amount</th>
</tr>
<!-- Rows -->
<tr class="saleline"> <td align="left">12</td> <td align="left">helaligth 35/=</td> <td align="right">35.00</td> <td align="right">420.00</td> </tr>
<tr class="saleline"> <td align="left">12</td> <td align="left">200p CR SR 195/=</td> <td align="right">195.00</td> <td align="right">2,340.00</td> </tr>
<tr class="saleline"> <td align="left">36</td> <td align="left">Sunlight 35g</td> <td align="right">6.00</td> <td align="right">216.00</td> </tr>
<!-- Totals -->
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" style="margin-top:30px">
<tr>
<td width="50%" class="block6"><h2></h2>
</td>
<td width="50%" class="block7" align="right"><h2></h2>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table class="block11" width="100%">
<tr>
<td><table></table></td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div class="signature">
<table border="0" cellspacing="2" cellpadding="2" align="left">
<tr>
<td style="padding-bottom:30px"></td>
</tr>
<tr>
<td><b>Signed by:</b>
<br/><b>Date:</b>
<br/><b>Signature:</b><br/></td>
</tr>
</table>
</div>
<div id="footer">
<table width="100%" border="0" cellpadding="2">
<tr>
<td align="center"><span class="footer-text">Thank you for your business.</span></td>
</tr>
</table>
</div>
</body>
</html>
You need an html parser, try this one http://htmlagilitypack.codeplex.com/
Load page into HtmlDocument
HtmlWeb htmlWeb = new HtmlWeb();
HtmlDocument htmlDocument = htmlWeb.Load("url");
Get table with specified Id
HtmlNode table = htmlDocument.DocumentNode.Descendants("table").SingleOrDefault(x => x.Id == "tableId");
Loop through nodes to find values
foreach(HtmlNode child in table.ChildNodes)
{
if (child.NodeType != HtmlNodeType.Text)
{
Console.WriteLine(child.Name);
}
}
More you can check here http://www.codeproject.com/Articles/691119/Html-Agility-Pack-Massive-information-extraction-f
You have to use parseHTML function of jquery and then loop through each element to get the values. Below is the working example (It can be more refined as per your need)
$(document).ready(function () {
var str = '<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>';
var html = $.parseHTML(str);
$.each(html, function (index, element) {
if ($(this).find("td:first").html() == "Subtotal")
console.log($(this).find("td:last").html());
else if ($(this).find("td:first b").html() == "TOTAL")
console.log($(this).find("td:last b").html());
else if ($(this).find("td:first").html() == "Less Payment")
console.log($(this).find("td:last").html());
else if ($(this).find("td:first strong").html() == "Balance Due")
console.log($(this).find("td:last").html());
});
});

How to Print HTML file using receipt printer

I have a sale invoice as a HTML file. I need write program to print that invoice using Epson TM-T82II receipt printer in C#. i am new to program.. therefore i need to know what is the best way to do that and how can i do it?
here i attached the picture of HTML file and HTML code.
please click to see HTML Invoice screenshot
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font-family:Verdana, Geneva, sans-serif;
font-size: 8pt;
padding: 0 50pt 0 50pt;
}
table td, table th, table.sales th, table td.footer-text {
font-size: 8pt;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
color:chocolate;
text-transform:uppercase;
font-size: inherit;
font-size: 1.5em;
}
h2 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:0px;
margin-bottom:0px;
color:chocolate;
text-transform:uppercase;
font-size: 1.3em;
}
h3 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
}
table.sales td {
padding: 4px 10px 4px 10px;
}
table.sales th {
padding: 5px 10px 5px 10px;
background-color:#CCC;
}
tr.saleline td {
border-bottom-color:chocolate;
border-bottom-width: 1pt;
border-bottom-style: solid;
vertical-align: top;
}
.signature {
display: none;
}
.horizontal-line {
border: 0;
height: 4pt;
color:chocolate;
background-color: chocolate;
}
.total {
font-weight:bold;
font-size:1.1em;
background-color:#CCC;
}
.block1 {
text-align:left;
vertical-align:bottom
}
.block2 {
text-align:right;
vertical-align:bottom
}
.block3 {
text-align:left;
vertical-align:top;
}
.block4 {
text-align:left;
vertical-align:top;
}
.block5 {
text-align:right;
vertical-align:bottom;
}
.block6 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block7 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block8 {
text-align:left;
vertical-align:bottom;
}
.block9 {
text-align:center;
vertical-align:bottom;
}
.block10 {
text-align:right;
vertical-align:bottom;
}
.block11 {
text-align:left;
padding: 25px 0 15px 0;
}
.extracols {
border-style:solid;
border-color:gray;
}
table.extracols {
border-top-width: 1pt;
border-right-width: 0;
border-bottom-width: 1pt;
border-left-width: 1pt;
border-collapse:collapse;
margin: 0 0 15pt 0;
}
table.extracols th {
padding: 5px 10px 5px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#CCC;
}
table.extracols td {
padding: 4px 10px 4px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#FFF;
}
#footer {
margin-top: 35px;
}
.footer-text {
font-size: inherit;
font-size: 0.97em
}
</style>
</head>
<body style="padding: 20 20 20 20">
<table width="100%">
<tr>
<td style="padding-bottom:20px"><table width="100%">
<tr>
<td style="text-align:left;"></td>
<td class="block2" align="right"><h3>Y.P.Brothers</h3>
No:55/B,<br/>Samagipura,<br/>Sewanagala.
<br/>077-6977139
<br/>mecduino#gmail.com
<br/>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><hr class="horizontal-line"/></td>
</tr>
<tr>
<td><table width="100%">
<tr>
<td style="padding:10px 0 20px 0;"><table width="100%">
<tr>
<td width="33%" class="block3"><strong>Bill To</strong><br />
ANUSHA SURIYA<br/>
</td>
<td class="block4"><strong></strong><br />
</td>
<td class="block5" align="right"><h1>invoice #1</h1>
<b>Date</b>: Oct 9, 2015
<br/><b>Due Date</b>: Oct 9, 2015
</td>
</tr>
</table></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td><table width="100%" class="sales">
<!-- Headers -->
<tr>
<th align="center">Qty</th> <th align="center">Item</th> <th align="right">Price</th> <th align="right">Amount</th>
</tr>
<!-- Rows -->
<tr class="saleline"> <td align="left">12</td> <td align="left">helaligth 35/=</td> <td align="right">35.00</td> <td align="right">420.00</td> </tr>
<tr class="saleline"> <td align="left">12</td> <td align="left">200p CR SR 195/=</td> <td align="right">195.00</td> <td align="right">2,340.00</td> </tr>
<tr class="saleline"> <td align="left">36</td> <td align="left">Sunlight 35g</td> <td align="right">6.00</td> <td align="right">216.00</td> </tr>
<!-- Totals -->
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" style="margin-top:30px">
<tr>
<td width="50%" class="block6"><h2></h2>
</td>
<td width="50%" class="block7" align="right"><h2></h2>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table class="block11" width="100%">
<tr>
<td><table></table></td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div class="signature">
<table border="0" cellspacing="2" cellpadding="2" align="left">
<tr>
<td style="padding-bottom:30px"></td>
</tr>
<tr>
<td><b>Signed by:</b>
<br/><b>Date:</b>
<br/><b>Signature:</b><br/></td>
</tr>
</table>
</div>
<div id="footer">
<table width="100%" border="0" cellpadding="2">
<tr>
<td align="center"><span class="footer-text">Thank you for your business.</span></td>
</tr>
</table>
</div>
</body>
</html>

How to add separator between rows in asp.net

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.

Resources