I'd like to target in XPath (to be used in xmlImport for Google Spreadsheets) the element that in CSS would be .forum-table tr:nth-of-type(1) .forum-number-topics:
<table class="forum-table forum-table-forums">
<thead class="forum-header">
<tr>
<th class="forum-icon"> </th>
<th class="forum-name">Forum</th>
<th class="forum-topics">Topics</th>
<th class="forum-posts">Posts</th>
<th class="forum-last-post">Last post</th>
</tr>
</thead>
<tbody id="forum-table-12892-content">
<tr class="forum-row even container-12897-child" id="forum-12897">
<td class="forum-list-icon forum-list-icon-default"> <span class="forum-list-icon-wrapper"><span>No new</span></span>
</td>
<td colspan="1" class="forum-details">
<div class="forum-name"> Settimana 1
</div>
</td>
<td class="forum-number-topics">
<div class="forum-number-topics">20</div>
</td>
<td class="forum-number-posts">171</td>
<td class="forum-last-reply">n/a</td>
</tr>
<tr class="forum-row odd container-13043-child" id="forum-13043">
<td class="forum-list-icon forum-list-icon-default"> <span class="forum-list-icon-wrapper"><span>No new</span></span>
</td>
<td colspan="1" class="forum-details">
<div class="forum-name"> Settimana 2
</div>
</td>
<td class="forum-number-topics">
<div class="forum-number-topics">21</div>
</td>
<td class="forum-number-posts">143</td>
<td class="forum-last-reply">n/a</td>
</tr>
<tr class="forum-row even container-13107-child" id="forum-13107">
<td class="forum-list-icon forum-list-icon-default"> <span class="forum-list-icon-wrapper"><span>No new</span></span>
</td>
<td colspan="1" class="forum-details">
<div class="forum-name"> Settimana 3
</div>
</td>
<td class="forum-number-topics">
<div class="forum-number-topics">20</div>
</td>
<td class="forum-number-posts">91</td>
<td class="forum-last-reply">n/a</td>
</tr>
</tbody>
</table>
I specified tr:nth-of-type(1) because I need the same syntax in Xpath (with numeric entity).
As a literal translation, I would try
//*[contains(#class, 'forum-table')]//tr[1]//*[contains(#class, 'forum-number-topics')]
Note that this will select both <td> and <div> elements, e.g. where you have
<td class="forum-number-topics">
<div class="forum-number-topics">
in the input. Also note that this assumes you don't have "ornery" classes that contain forum-table but not as a whole class name, e.g. if your first table element had class="forum-table-forums" without forum-table in there. If you need to be more rigorous about matching class names, you can do
//*[contains(concat(' ', #class, ' '), ' forum-table ')]//tr[1]//
*[contains(concat(' ', #class, ' '), ' forum-number-topics ')]
(line broken for clarity).
Related
I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>
Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO
I am creating a table but I am having trouble in the last panel (Condition). I want the table have 2 rows but I have tried and failed, how to create in a 2 row colum?
likely this image
I tried everything but could not, you can explain it to me
Thank a lot
<table id="items">
<tr>
<th width="25%">Prestation</th>
<th width="10%">Prix Unitaire</th>
<th width="10%">Quantity</th>
<th width="10%">Montant</th>
<th width="45%">Condition</th>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><input type="text" style="width: px; height: 47px;"><a class="delete" href="javascript:;" title="Remove row">X</a></div>
</td>
<td><input type="text" class="cost" style="width: 100px; height: 47px;"></td>
<td><input type="text" class="qty" style="width: 60px; height: 47px;"></td>
<td><span class="price"></span></td>
<tr class="condition">
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value">
<div id="subtotal"></div>
</td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value">
<div id="total"></div>
</td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Montant payé</td>
<td class="total-value"><input type="text" id="paid" style="width: 50px; heigth: ;"></td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line balance">Solde dû</td>
<td class="total-value balance">
<div class="due"></div>
</td>
</tr>
</table>
I am not sure about your question. If you mean, have one column in 2 row, try use rowspan="2" in tag <row> instead of colspan.
Colspan will stretch one column through columns.
Rowspan will
stretch one row through rows.
How can I have align Name with title/phone/email and when I expand my page the aligning is messing up as shown in screen shot 1 and 2
I have tried: style="display:initial;position: relative; "
but does not do any good.
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="data2Col first " colspan="2">
<div>
<span class="labelCol vfLabelColTextWrap" scope="row" style="display:inline-block; ">Name </span>
<span class="data2Col"> Erich Schulz </span>
</div>
</td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap " scope="row">Title</th>
<td class="data2Col "><span id="j_id0:j_id1:j_id3:j_id4:j_id6"></span></td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap " scope="row">Phone</th>
<td class="data2Col "><span id="j_id0:j_id1:j_id3:j_id4:j_id7">(555) 555-5555</span></td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap last " scope="row">Email</th>
<td class="data2Col last "><span id="j_id0:j_id1:j_id3:j_id4:j_id8">test#example.com</span></td>
</tr>
</tbody>
</table>
Try replacing both span elements with th and td
<span class="labelCol vfLabelColTextWrap" scope="row" style="display:inline-block; ">Name </span>
<span class="data2Col"> Erich Schulz </span>
Shown below:
<th class="labelCol vfLabelColTextWrap " scope="row">Name </th>
<td class="data2Col"> Erich Schulz </td>
As written in my comment, I would replace the span elements in the first table row by td elements (and remove the colspan=2 from that row):
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="data2Col first ">
<div>
<td class="labelCol vfLabelColTextWrap" scope="row" style="display:inline-block; ">Name </td>
<td class="data2Col"> Erich Schulz </td>
</div>
</td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap " scope="row">Title</th>
<td class="data2Col "><span id="j_id0:j_id1:j_id3:j_id4:j_id6"></span></td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap " scope="row">Phone</th>
<td class="data2Col "><span id="j_id0:j_id1:j_id3:j_id4:j_id7">(555) 555-5555</span></td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap last " scope="row">Email</th>
<td class="data2Col last "><span id="j_id0:j_id1:j_id3:j_id4:j_id8">test#example.com</span></td>
</tr>
</tbody>
</table>
Or, if for some reason you have to keep those span elements, wrap them with <td>...</td>
Additional edit: As spencerlarry wrote correctly, the first one is actually a <th> tag. But that probably won't make a difference regarding the alignment.
Why do you use the first column in one piece? Please change the first <tr> block as follows:
<tr>
<td class="labelCol first">
<span class="vfLabelColTextWrap" scope="row">Name </span>
</td>
<td class="data2Col">
Erich Schulz
</td>
</tr>
in my html i wanna use "th:unless". i wanna compare two coming variable,if any one match with other, i want to hide the button in that raw.
here is my code..
Art-in-Nisantasi-Id
Art-in-Nisantasi-Text
Art-in-Nisantasi-Url
Art-in-Nisantasi-Coordinate
<h3>All Contents</h3>
<table border="1">
<tr align="left">
<th style="width: 20px;">Art-in-Nisantasi-Id</th>
<th style="width: 100px;">Art-in-Nisantasi-Text</th>
<th style="width: 50px;">Art-in-Nisantasi-Url</th>
<th style="width: 50px;">Art-in-Nisantasi-Coordinate</th>
</tr>
<tr th:each="contentType:${contentTypes}">
<td th:text="${contentType.art_in_nisantasi_id}"></td>
<td th:text="${contentType.art_in_nisantasi_text}"></td>
<td th:text="${contentType.art_in_nisantasi_url}"></td>
<td th:text="${contentType.art_in_nisantasi_coordinate}"></td>
</tr>
<div>
<td
th:unless="${contentType.art_in_nisantasi_id}+'='+${selectedContent.art_in_nisantasi_id}"></td>
<td th:attr="data-id=${contentType.art_in_nisantasi_id}">
<button type="button" class="action-addButton" onclick="show">Ekle</button>
</td>
</div>
</table>
try this way :
<td th:unless="${contentType.art_in_nisantasi_id == selectedContent.art_in_nisantasi_id}"></td>
this td element will be produced or created in dom when both are not equal
I am trying to format a table to look like this...
Basically i want the "Dates" row to have two columns inside it (to and from) both of them 50% the width of dates...but however when i try to format it. "To" takes all of date and "From" takes all of Name. they arent locked under "Dates"
Any help will be appreciated...Thank you
<th width="100%">Dates</th><th>Name</th><th>Age</th>
<tr>
<tr>
<td width="50%">To</td>
<td width="50%">From</td>
</tr>
</tr>
Change
<table border="1">
<tr class="heading"> <td colspan="6">Information</td> </tr >
<th width ="15" colspan="2">Dates</th><th> Name</th><th>Age</th>
<tr>
<tr>
<td width="2">From</td>
<td width="2">To</td>
<td></td>
<td></td>
</tr>
<tr>
<td width="5">
<input type="text" class="input" name="1fdate" /></td>
<td width="2">
<input type="text" class="input" name="1fdate" /></td>
</tr>
</tr>
</table>
I hope this is what you need. You use colspan and rowspan to merge the cells. When you set colspan to "2" in Date cell, it spans the row with two cells (or colums). And you set also rowspan of the cells next to Date to "2" so that they will span the rows taken by whole Date section.
<table width="600" border="0">
<tr>
<th width="200" colspan="2" scope="col">Date</th>
<th width="200" rowspan="2" scope="col">Name</th>
<th width="200" rowspan="2" scope="col">Age</th>
</tr>
<tr>
<th width="100">To</th>
<th width="100">From</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Change
<th width="100%">Dates</th>
to have colspan value. Like
<th colspan="2">Dates</th>
Replace first line with below
<th width="100%" colspan="2">Dates</th><th>Name</th><th>Age</th>