Develop Reference

Print Table Header on Each HTML Page

I am trying to print Header & footer on Every page using HTML's Thead Tag in Asp.net.
when I try with a Logo or image using Div in thead tag it works. But when I try with a table, in thead tag then it doesn't work.
CSS:
I am using the below method
#media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
#media screen {
thead { display: block; }
tfoot { display: block; }
}
<table style="width:100%">
<thead>
<tr>
<th>record1</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
working
But I need to using
<table style="width:100%">
<thead>
<tr>
<th><table>
<tr><td>Name</td><td>Label</td></tr></table></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I need to know this information and logo shown on each page but after adding this information, they gave the margin. Please Review screenshots below
https://i.stack.imgur.com/L0ZTs.jpg
https://i.stack.imgur.com/Z1OsI.png

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

WebGrid: GetSelectLink() returning wrong details for selected record

Context: I’m building a web application using WebMatrix and C# Razor. The application searches a database and returns the results to a WebGrid. Once the results are returned, you can click a Details link and view the details on a new browser tab.
Problem: The initial search, which returns all records, works fine. If I enter search words, the correct results are returned, but when I click on Details, I get details for the record that was in the selected row in the initial search.
Example: The initial search returns records 1-5. The subsequent search returns records 31, 65, 86,92, 101. If I click on Details for record 65, I get details for record 2 because record 2 occupied row 2 in the initial search.
Code:
#{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Home Page";
}
#{
var db = Database.Open("xyz");
var query = "select bg_bug_id [BUGID], BG_SUMMARY SUMMARY from [dbo].[BUG] where BG_SUMMARY like #0 and BG_SUMMARY like #1";
var input1 = "%" + Request["input1"] + "%";
var input2 = "%" + Request["input2"] + "%";
var data = db.Query(query, input1, input2);
var gridBug = new WebGrid(source: data, canPage: true, canSort: true, rowsPerPage: 10);
if(gridBug.HasSelection){
var recordIdInt = 0;
recordIdInt = gridBug.SelectedRow.Value.BUGID;
var recordId = recordIdInt.ToString();
var bugDescQuery = "select [BG_DESCRIPTION] from [dbo].[BUG] where [BG_BUG_ID] =" + recordId; // or [BG_BUG_ID] = 25001";
var bugDescResult = db.Query(bugDescQuery);
foreach(var item in bugDescResult){
var desc = item.BG_DESCRIPTION;
var modDesc = desc.Replace("<div align=\"left\">", "<div>").Replace("<font face=\"Arial\">", "<font>").Replace("<span style=\"font-size:8pt\">", "<span>");
<script>
$(document).ready(function(){
var x = '#Html.Raw(HttpUtility.JavaScriptStringEncode(modDesc))';
var win = window.open();
win.document.body.innerHTML = "Record ID: " + #recordId + " - -" + x;
})
</script>
}
}
}
<form method="post">
<input type="text" name="input1"/>
<input type="radio" id="and" name="operator" value="and" checked>And
<input type="radio" id="or" name="operator" value="or">Or
<input type="text" name="input2" />
<select>
<option value="Unresolved">Unresolved</option>
<option value="Resolved">Resolved</option>
</select>
<input type="submit" value="Search" />
#gridBug.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: gridBug.Columns(
gridBug.Column(header:"", format:#<text>#item.GetSelectLink("Details")</text>, style: "product2"),
gridBug.Column("BUGID", "BUGID", style: "product2"),
gridBug.Column("SUMMARY", "SUMMARY", style: "product")))
</form>
#section script{
<script type="text/javascript">
$(function(){
$('th a, tfoot a').live('click', function() {
$('form').attr('action', $(this).attr('href')).submit();
return false;
});
});
</script>
}
<style type="text/css">
.grid {
margin: 4px;
border-collapse: collapse;
width: 950px;
margin-left: 5px
}
.head {
background-color: #0094ff;
font-weight: bold;
color: #fff;
}
.grid th, .grid td {
border: 1px solid #c0c0c0;
padding: 5px;
}
.alt {
background-color: #e8e8e8;
color: #000;
}
.product {
width: 200px;
font-weight: normal;
}
.product2 {
width: 10px;
font-weight: normal;
}
</style>
SOURCE AFTER 2nd SEARCH:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
$(function(){
$('th a, tfoot a').live('click', function() {
$('form').attr('action', $(this).attr('href')).submit();
return false;
});
});
</script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">XXXX</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<form method="post">
<input type="text" name="input1"/>
<input type="radio" id="and" name="operator" value="and" checked>And
<input type="radio" id="or" name="operator" value="or">Or
<input type="text" name="input2" />
<select>
<option value="Unresolved">Unresolved</option>
<option value="Resolved">Resolved</option>
</select>
<input type="submit" value="Search" />
<table class="grid">
<thead>
<tr class="head">
<th scope="col">
</th>
<th scope="col">
BUGID </th>
<th scope="col">
SUMMARY </th>
</tr>
</thead>
<tfoot>
<tr >
<td colspan="3">1 2 3 > </td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="product2">Details</td>
<td class="product2">1655</td>
<td class="product">summary text for record 1655</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">2516</td>
<td class="product">summary text for record 2516</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">2639</td>
<td class="product">summary text for record 2639</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">2643</td>
<td class="product">summary text for record 2643</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">3493</td>
<td class="product">summary text for record 3493</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">3746</td>
<td class="product">summary text for record 3746</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">3864</td>
<td class="product">summary text for record 3864</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">5172</td>
<td class="product">summary text for record 5172</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">7156</td>
<td class="product">summary text for record 7156</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">7532</td>
<td class="product">summary text for record 7532</td>
</tr>
</tbody>
</table>
</form>
<style type="text/css">
.grid {
margin: 4px;
border-collapse: collapse;
width: 950px;
margin-left: 5px
}
.head {
background-color: #0094ff;
font-weight: bold;
color: #fff;
}
.grid th, .grid td {
border: 1px solid #c0c0c0;
padding: 5px;
}
.alt {
background-color: #e8e8e8;
color: #000;
}
.product {
width: 200px;
font-weight: normal;
}
.product2 {
width: 10px;
font-weight: normal;
}
</style>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2015 - XXXX</p>
</div>
</div>
</footer>
</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.

How to apply CSS to navigation bar with master pages?

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/