I have table which have more rows:
This table start on new page and some rows are hidden (are not visible on next page).
I want to place table on previous page and hidden visible display to next page. I use DOMPDF 0.8.3.
I tried:
<table style"page-break-inside: auto;">
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
</table>
Do not know how to solve this, please?
Related
I working on Vue3 with Quasar/cli.
How to make this category dividers (blue subtitles) with Quasar component qTable or qMarkupTable? screen
Ive tried to figure out body slots but I couldnt
Link to qTable API doc
https://quasar.dev/vue-components/table#introduction
Link to qMarkupTable API doc
https://quasar.dev/vue-components/markup-table#introduction
For QMarkupTable, add a row whose TD spans all the columns:
<q-markup-table>
<thead>
<tr>
<th>№</th>
<th>Name</th>
<th>Code</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary text-white">
<td colspan="4">Medicines</td>
</tr>
<tr>
<td>1</td>
<td>Mukosolvan</td>
<td>101492</td>
<td class="text-negative">1</td>
</tr>
</tbody>
</q-markup-table>
QMarkupTable is a regular HTML table - it just applies the proper styling on it, everything else is the same HTML you've been studying as a student.
I would like to use footable (I've already use footable for its responsive exploding display )and this to show records coming from a database but with a need to have a column (which display the stock quantity of products) that thye user can modify just by typing. Is there any way of having some sort of content editable column....
Any idea will be welcome
You can render the column as HTML, which will prevent footable from taking over the content of the cell, and have an <input type="text" /> for each row.
Something like:
<table>
<thead>
<tr>
<th>Name</th>
<th data-type="html">In stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td><input type="number" step="any" value="3"/></td>
</tr>
<tr>
<td>Oranges</td>
<td><input type="number" step="any" value="0"/></td>
</tr>
</tbody>
</table>
Check the documentation at https://fooplugins.github.io/FooTable/docs/getting-started.html , look for "Column Options" > "Type" .
After rendering you can attach an event listener to the input fields and send ajax calls accordingly.
I am learning Angular-2 and try to build data-grid component and run into a problem with dynamic interpolation.
Assume, the other component will consume the data-grid like the following:
<data-grid [model] = 'users'>
<column header='Last Name' value="lastName" ></column>
<column header='First Name' value='firstName' ></column>
<column header='Address' value='address' ></column>
</data-grid>
The data-grid component holds a collection of columns. From the data-gird, I try to loop through the columns collection to build the column header then show all data. The headers for the table is easy but I don't know how to do the nested interpolation for row and columns.
<div class="container" >
<table class="table table-hover">
<thead class="thead-default">
<tr>
<th template="ngFor let col of columns">
{{ col.header}}
<th>
</tr>
</thead>
<tbody>
<tr template="ngFor let row of model">
<td template="ngFor let col of columns">
<!-- want to loop though the columns
{{row.{{col.value}}}} //How to make this statement works? -->
</td>
</tr>
</tbody>
</table>
</div>
Any idea how to solve this problem?
thanks,
Austin
You do not need the additional evaluation brackets. Use square brackets for array indexing.
<tr *ngFor="let row of model">
<td *ngFor="let col of columns">
{{row[col.value]}}
</td>
</tr>
http://plnkr.co/edit/DVwolRDu0JNcsXTaTrir
How can I locate an element "1988" (the fourth line) in the following table:
<table border="0" width="820" cellpadding="2" cellspacing="0">
<tbody>
<tr valign="top">
<td class="default" width="100%">Results <b>1</b> to <b>10</b> of <b>1988</b></td>
</tr>
<tr valign="top">
<td class="default" bgcolor="#C0C0C0"> <font class="resultsheader"> ...etc
</tr>
</tbody>
</table>
IMPORTANT: I know one way that works (By.xpath):
driver.findElement(By.xpath("//td[#width='100%']")).getText();
However, this way does not ALWAYS work. The page is dynamic, so I need a way to locate that element no matter what changes happen to the page.
I tried the following but I am not sure:
By.xpath("//html//body//table//tbody//tr[3]//td//table//tbody//tr//td[2]//table[4]//tbody//tr[1]//td//b[3]"
If you can't change the HTML and want to use attributes for selection, you can write something like this:
//table[#border=0][#width=820]//tbody//tr[1]//td//b[3]
Given
<table>
<tr>
<td>service1</td>
</tr>
<tr>
<td>service2</td>
</tr>
<tr>
<td>service3</td>
</tr>
<tr>
<td>blip</td>
</tr>
</table>
How can I select the last 'service-n' row when I don't know what n will be?
I have tried adding [last()] but it didn't work.
I have:
//table//tr//td[contains(text(),'service')]
but it selects the 1st row and I want the last one.
I can't use tr[3] because in reality the number of 'service-n' rows is dynamic and changes a lot.
The answer was exactly where I put the [last()] and I had it in the wrong place
It goes here:
//div[#id='content']//table//tr[last()]//td[contains(text(),'service')][last()]/following-sibling::td[2]
Not here:
//div[#id='content']//table//tr[last()]//td[contains(text(),'service')]/following-sibling::td[2][last()]
try with cssSelector, this way.
By.cssSelector("table tr:last-child td")
List<WebElement> allElement=fd.findElements(By.xpath("//table//td[contains(.,'service')]");
int count=allElement.size();
allElement.get(count-1).click();
<table id="table1">
<tbody>
<tr id="tr1">
<td id="td1"></td>
<td id="td2"></td>
<tr>
<tr id="tr2">
<td id="td3"></td>
<td id="td4"></td>
<tr>
<tbody>
</table>
Then to target last td of last tr
we can have xpath as:xpath="//table[#id='table1']//tr[last()]//td[last()]";
(//div[#id='name'])[last()]
By using we can get the last element of the relevant filed.
//div[#id='name'][last()]
Multiple elements in last