To set background color for table td i used css property background-image and background size, it works in HTML but not in MPDF.
<table style="width:100%">
<tr>
<td>
<table style="width:100%">
<tr>
<td style="width:50%; border:1px solid black; height:20px; background-image:linear-gradient(to right, #6666FF, #6666FF); background-size:50% 100%;background-repeat:no-repeat"></td>
<td style="width:50%; border:1px solid black; height:20px; background-image:linear-gradient(to right, #99FF66, #99FF66); background-size:80% 100%;background-repeat:no-repeat"></td>
</tr>
</table>
</td>
</tr>
</table>
background-size CSS property is not supported in mPDF for <td> elements.
Also see https://mpdf.github.io/css-stylesheets/supported-css.html.
Related
I use cfdocument and I need to remove bottom-padding from my table.
<cfdocument format="pdf">
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table bgcolor="red">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td style="padding-bottom: 0px;" cellspacing="0">Magazzini Alimentari Riuniti</td>
<td style="padding-bottom: 0px;" cellspacing="0">Giovanni Rovelli</td>
<td style="padding-bottom: 0px;" cellspacing="0">Italy</td>
</tr>
</table>
</body>
</html>
</cfdocument>
I need to remove the bottom padding (yellow vertical line)
I use padding-bottom: 0px; but didn't worked. There is cellspacing="0" but it will affect entire table.
cffiddle : https://cffiddle.org/app/file?filepath=7b8c6141-8bac-42f5-a653-71ddce64c554/fe42c362-17cb-4810-b532-64e11d98685a/c885261b-341d-4ea2-b6d8-3c55687094ec.cfm
I have a report which is completely of HTML based. I'm trying to automate and using selenium webdriver for finding the elements. In one of the part, below is the HTML format
<tbody>
<tr>
<td style="border: 1px solid #D1D1D1; background-color:#F4F4F4; color: #707070;padding :2px;">
<table style="width: 100%;
border-collapse: collapse; font-size: 15px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" role="presentation">
<tbody><tr>
<!--Action Date -->
<td></td>
<td width="100%" valign="top" align="right">
<span style="font-size: 12px;">12/7/20 10:21 AM</span>
</td>
</tr>
<tr>
<!-- Name and status column -->
<td style="" width="25" valign="top" align="center">
<img src="images/qual_checkmark_24.png" alt="">
</td>
<td width="535">
<span>First line of <strong>TEXT</strong></span>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="border: 1px solid #D1D1D1; background-color:#F4F4F4; color: #707070;padding :2px;">
<table style="width: 100%;
border-collapse: collapse; font-size: 15px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" role="presentation">
<tbody><tr>
<!--Action Date -->
<td></td>
<td width="100%" valign="top" align="right">
<span style="font-size: 12px;">12/7/20 10:18 AM</span>
</td>
</tr>
<tr>
<!-- Name and status column -->
<td style="" width="25" valign="top" align="center">
<img src="images/qual_arrowupcircleblue_24.png" alt="">
</td>
<td width="535">
<span>Second line of<strong>TEXT</strong></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I wanted to find the text in span tag (eg: first line of text, second line of text ) where i don't have any other attributes. I tried various other way of finding it via xpath, cssSelector and nothing works. Could someone help?
Try to use this XPath to select span nodes without attributes:
//span[not(#*)]
//tbody/tr[2]/td/span
you can use the parent as reference, in the html you provided the span is under the tr which is second element of tbody.
//tbody/tr[2] , will find all elements which are second child of tbody , and then direct child td/span
A combination of both answers would be probably best:
//tbody/tr/td/span[not(#*)]
It's still flexible and less error-prone at the same time.
There are two sets of <span> tags. One that holds the datetime e.g. 12/7/20 10:18 AM and the other that holds the text e.g TEXT.
To print the list of <span> tag texts you need to induce WebDriverWait for the visibilityOfAllElementsLocatedBy() and you can use Java8 stream() and map() and you can use either of the following Locator Strategies:
xpath:
List<String> myTexts = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//tbody//tr/td/table/tbody//tr//td/span[./strong]"))).stream().map(element->element.getText()).collect(Collectors.toList());
System.out.println(myTexts);
I am having a p-table with and body. Before enabling the scroll, checkboxes in header and body and other header alignments were perfect. But after adding [scrollable]=true and scrollHeight="200px" to p-table tag, headers are misaligned with rows.
Below is my code for p-table :
<p-table [columns]="columns" [value]="values" [(selection)]="selectedRowData"
[scrollable]="true" scrollHeight="200px">
<ng-template pTemplate="header" let-gridColumns>
<tr>
<th style="width: 3em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of gridColumns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-gridColumns="columns">
<tr>
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of gridColumns" style="word-break: break-all; max-width: 100px;">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
can someone help me aligning the headers with its row?
Thanks in advance
I faced same issue and in my scenario it was resolved by adding [scrollable]="true" after scrollHeight and add width to columns. like
<p-table [columns]="columns" [value]="values" [(selection)]="selectedRowData" [responsive]="true"
scrollHeight="248px" scrollDirection="both" [autoLayout]="true" [scrollable]="true">
<ng-template pTemplate="header" let-gridColumns>
<tr>
<th style="width: 3em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th style="width: 100vw;" *ngFor="let col of gridColumns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-gridColumns="columns">
<tr>
<td style="width: 3em">
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of gridColumns" style="width: 100vw !important; overflow: hidden; text-overflow: ellipsis;">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
Note:
Data is displayed as ellipsis after 100vw
Width on th accordingly same as on td
I had the same issue and my resolution had part of the previous answers but also required min-width to be set. Yours may work without the min-width but mine required it to function properly. We are on PrimeNG "primeng": "11.3.1",
Working example:
#idOfPTableElement {
th {
width: 100vw !important;
min-width: 210px;
}
td {
width: 100vw !important;
min-width: 210px;
}
}
Relative to this topic/issue, the header and the body of the p-table are separate tables. In addition, I had to use the following to fix the body (actual table data section/body) alignment issues I experienced. Without it, the lower table was indented looking and was never in alignment with the upper table (header table)
.p-datatable-scrollable-header-box {
padding-right: 0px !important;
}
I want to make the table transparent and I want to see the background image through the table list which is striped with different colors.
I have tried the following but it didn't work.
<style> #loading {
position: absolute; width: 100%; height: 100%; background: url('http://www.jettools.com/images/animated_spinner.gif') no-repeat center center;
}
</style>
<div id="loading"></div>
<table style="background: transparent !important;">
<thead>
<th></th><th></th><th></th><th></th>
</thead>
<tbody style="background: transparent !important;" >
<tr>
<td title="">
</td>
<td title=""
</td>
<td title="">
</td>
<td title="">
</td>
</tr>
</tfoot> </tfoot>
</tbody>
</table>
I have a Application Under Test that has a tabular structure like below:
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: White">
<tbody>
<tr>
<td id="lefthandcol" class="b24-lefthandcol" valign="top" style="width: 130px !important">
<td style="height: 400px; width: 5px">
<td style="height: 400px; width: 5px">
<td valign="top">
<div id="ctl00_ContentPlaceHolder1_MiddlePanel">
<div id="DestinationDiv"></div>
<table>
</td>
<td style="height: 400px; width: 5px">
<td style="height: 400px; width: 5px">
<td width="225" valign="top" align="right" style="background-color: White;">
</tr>
</tbody>
</table>
The question is how do I identify this table since it doesn't have id?
What is generally people do in such scenario?
You should find any unique parent-children relationship and write it with the help of CSS or Xpath:
IWebElement table = driver.FindElement(By.XPath("//table[descendant::*[#id='ctl00_ContentPlaceHolder1_MiddlePanel']]"));
So the table with descendant element with id=ctl00_ContentPlaceHolder1_MiddlePanel will be found.
If id is not available then either go with xpath or css.If you cant write them by your own then you can use tools like firebug and xpath checker..