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.
Related
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.
How to footer float to bottom and horizantal scroll working correctly with thead and tbody ?
I tried to it, But it dont work horizontal scroll correctly when footer position:fixed , position:absolute and other state.And is it Possible to work without tbody:after css ?
<body>
<table><thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>TestHeader1</th>
<th>TestHeader2</th>A
<th>TestHeader3</th>
<th>TestHeader4</th>
<th>TestHeader5</th>
<th>TestHeader6</th>
<th>TestHeader7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>100</td>
<td>101</td>
<td>102</td>
<td>103</td>
<td>104</td>
<td>105</td>
<td>106</td>
<td>107</td>
</tr>
<tr>
<td>February</td>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>180</td>
<td>182</td>
<td>184</td>
<td>186</td>
<td>188</td>
<td>190</td>
<td ></td>
<td >194</td>
</tr>
</tfoot>
</table>
</body>
Image
styles
html,
body {
height: 100%;
margin: 0;
}
table, th, td {
border: 1px solid black;
}
tbody:after
{
background-color:orange;
height:100px;
content: "";
display: block;
}
</style>
You can set a sticky position for footer tag and set inset-block-end for fixed footer in bottom
table,
th,
td {
border: 1px solid black;
}
tbody:after {
background-color: orange;
height: 1000px;
content: "";
display: block;
}
table tfoot {
position: sticky;
background-color: white;
}
table tfoot {
inset-block-end: 0; /* "for fixed in bottom" */
}
<!DOCTYPE html>
<html>
<head>
<title>Another simple example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<body>
<table><thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>TestHeader1</th>
<th>TestHeader2</th>A
<th>TestHeader3</th>
<th>TestHeader4</th>
<th>TestHeader5</th>
<th>TestHeader6</th>
<th>TestHeader7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>100</td>
<td>101</td>
<td>102</td>
<td>103</td>
<td>104</td>
<td>105</td>
<td>106</td>
<td>107</td>
</tr>
<tr>
<td>February</td>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>180</td>
<td>182</td>
<td>184</td>
<td>186</td>
<td>188</td>
<td>190</td>
<td ></td>
<td >194</td>
</tr>
</tfoot>
</table>
</body>
</body>
</html>
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.
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 */
}
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/