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
Related
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>
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 have this html:
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body1</td>
</tr>
<tr>
<td>Body2</td>
</tr>
<tr>
<td>Body3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
</tr>
</tfoot>
</table>
I tried to get the Inner.Html of the <td></td> within <tfoot></tfoot>, but I have problem with it.
Here is what I have tried:
var mainGrid = htmlDoc.DocumentNode.SelectSingleNode("//table");
var footerGrid = mainGrid.SelectSingleNode("//tfoot");
var tdFooterGrid = footerGrid.SelectSingleNode("//td");
if (tdFooterGrid != null)
{
var a = tdFooterGrid.InnerHtml;
}
That was fine until I retrieved the footerGrid. When I continued to get the td in order to get the Footer text, it resulted the Body 1 instead.
Is there any suggestion for this?
Below Code will work if you want values inside footer td tag.
var footerGrid = htmlDoc.DocumentNode.SelectSingleNode("//tfoot//td");
if (footerGrid != null)
{
var a = footerGrid.InnerText;
}
I have 2 test cases in which i want to select the html and need to get the values of all td's
1. Need to select the 2nd html displayed in the webpage and iterate through the td's and get the value
2. Need to select the 3rd html displayed in the webpage and iterate through the td's and get the value.
Below is the html
<html> - 1st html in the page
<body>
<table>
<tbody>
<tr>
<td>..</td>
....
</tr>
.....
....
</tbody>
</table>
</body>
</html>
<iframe> - Parent
<iframe tabindex="-1" frameborder="no" width="100%" src="about:blank" class="active">
<html> - 2nd html in the page
<body>
<table>
<tbody>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
....
....
.....
<tbody>
</table>
</body>
</html>
</iframe>
<iframe tabindex="-1" frameborder="no" width="100%" src="about:blank" class="active">
<html> - 3rd html in the page
<body>
<table>
<tbody>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
<tbody>
</table>
</body>
</html>
</iframe>
</iframe>
FYI, I'm switching to the IFrame before finding the element
driver.SwitchTo().Frame(); - outerframe
driver.SwitchTo().Frame(); - InnerFrame
I tried the below one to find the element, but it is selecting the first html element on the webpage.
List<IWebElement> elements = driver.FindElement(By.XPath("/html/body/table/tbody")).FindElements(By.TagName("tr")).ToList();
Could anyone help me out on this?
Thanks
Try this:
var frames = driver.FindElements(By.TagName("iframe")).ToList()
driver.switchTo().frames[1];
tds = WebDriver.FindElements.(By.Tagname("td");;
var td = tds.Where(ele=>ele.Text=="Something").ToList();
You should use code like below:
List<WebElement> elements = driver.findElements(By.xpath(""));
for(WebElement el: elements){
String value = el.findElement(By.tagName(td)).getText();
System.out.println(value);
}
While iterating frame td's you should select frame first then apply same as above code
I have a table:
<table id="trTable" runat="server" clientidmode="Static">
<thead>
<tr>
<th style="display:none">
ID
</th>
<th style="width: 112px">
Item
</th>
<th style="width: 40px; text-align: left">
Price
</th>
<th style="width: 24px; text-align: center">
</th>
<th style="width: 26px; text-align: center">
Qty
</th>
<th style="width: 24px; text-align: center">
</th>
<th style="width: 40px; text-align: right">
Total
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
and new rows are added to it with jQuery:
var newRow = $("<tr> <td class='drinkID' style='display:none'>" + drinkID + "</td> <td class='drinkName'>" + dName + "</td> <td class='drinkPrice'>" + dPrice + "</td> <td style='text-align:center'><input id='Button' type='button' value='<' class='minusButton' /> </td> <td class='drinkQty'>1</td> <td style='text-align:center'><input id='Button' type='button' value='>' class=\"plusButton\" /></td> <td class='drinkTotal'>" + dPrice + "</td> </tr>");
How do I access the content of the cells using asp.net?
I am using:
foreach (HtmlTableRow row in trTable.Rows)
{
Response.Write("RowDetails:" + row.Cells[1].InnerHtml);
}
But the response.write just outputs:
RowDetails: Item
How come it doesn't get the cell contents?
What you change on the html struct page, on client side, is not send back on the server, and sever know nothing about.
With other words, what is on the page, is not fully sanded back on the server.
To solve this, you can make at the same time two edits, one on what user see and one hidden on a hidden input, to post back to the server the changes and recreate the table on the server side.
Hope this make scene.
You can also use Microsoft Ajax enabling partial rendering on in the row. This will do the same postback effect but will only send the afffected content to the client side.