HTML: Unexpected double row using rowspan - html

I want to create a normal table. But I need to put two fields in one row.
So, I used rowspan and expected to have a two row table, but with a space of fourth.
But, it's showed in only one line.
I revised, and look for something wrong, but I dont unerstaing.
When I remove the rowspan, everything looks normal, but I need the rowspan.
Why is render in one row?
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
</tbody>
</table>
This is a picture of my app in action, and the reason of my question.
https://www.dropbox.com/s/1luaxgg4yesm8re/result.png

Replace the rowspans with colspans. For example:
<td colspan="2">
(...)
</td>
EDIT:
Still not 100% sure what you're trying to achieve but as far as I believe you might want to:
remove rowspan from all the td's that are meant to be two-rowed.
add and additional <tr></tr> after each tr and fill it with a number of tds equal to number of cells with rowspan.

I just had a similar problem, try adding an empty Row at the end of the missbehaving Row something like this:
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
</tbody>
</table>
It worked for me :)

Related

How to align two TD with different length in same row<tr>

Please help me how to align this structure properly. I would like to decrease the size of td "Todays Special" to considerable height. This td grows based on my value say if new fruits added then the header td also grows.
Be kind to help me to resolve this
<table>
<tr>
<td class="title">Todays Special</td>
<td>
<div style="height: 120px; width:100%;overflow-y:auto;">
<table style="height: auto; width:100%;" valign="top">
<tbody>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">6</td>
<td colspan="4" class="title">mango</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">23</td>
<td colspan="4" class="title">orange</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">29</td>
<td colspan="4" class="title">banana</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">47</td>
<td colspan="4" class="title">papaya</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">11959</td>
<td colspan="4" class="title">kiwi</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
If you edit the "Todays Special" td, you can set the desired width and font-size through the style property of the td tag. And also set the alignment you want.
As you are not making a Table header from a row, you have to set different styles to the main td and the rest of the table.
Hope I helped.
Assuming you just want to match the height of the column Todays's Special. You can do this by adding the rowspan according to the no. of items in the list
<td class="title" rowspan="5">Todays Special</td>
<div>
<table style="height: auto;" valign="middle">
<tbody>
<tr>
<td class="title" rowspan="5">Todays Special</td>
<td class="title">6</td>
<td class="title">mango</td>
</tr>
<tr>
<td class="title">23</td>
<td class="title">orange</td>
</tr>
<tr>
<td class="title">29</td>
<td class="title">banana</td>
</tr>
<tr>
<td class="title">47</td>
<td class="title">papaya</td>
</tr>
<tr>
<td class="title">11959</td>
<td >kiwi</td>
</tr>
</tbody>
</table>
</div>

XPath to table cell (td) contents based upon label?

Can anyone help me to find the right XPath to retrieve the Average Win and Loss value (36.68 pips and -38.56 pips) from this web page:
https://www.myfxbook.com/members/babatrader/ic-markets-live/2595252
Here the portion of the HTML
<table class="maxWidth" cellspacing="0" id="trades">
<tbody><tr>
<td valign="top">
<table cellspacing="0" class="advanced border0L">
<tbody><tr class="bg1">
<td>Trades:</td>
<td class="alignR">2885</td>
</tr>
<tr>
<td>Profitability:</td>
<td align="right" class="pointer">
<span id="wonTip" class="Won 1619 out of 2885 trades, which represents 56%.<br/>Lost 1266 out of 2885 trades, which represents 44%."><div class="blockHolder">
<div class="greenBlock floatLeft" style="width:56px"></div>
<div class="redBlock floatLeft" style="width:44px"></div>
</div></span>
</td>
</tr>
<tr class="bg1">
<td>Pips:</td>
<td class="alignR">10571.7</td>
</tr>
<tr>
<td>Average Win:</td>
<td class="alignR">36.68 pips / €3.31</td>
</tr>
<tr class="bg1">
<td>Average Loss:</td>
<td class="alignR">-38.56 pips / -€3.56</td>
</tr>
<tr>
<td> Lots:</td>
<td class="alignR">38.94</td>
</tr>
<tr class="bg1">
<td>Commissions:</td>
<td class="alignR">-€226.56</td>
</tr>
</tbody></table>
</td>
<td valign="top">
<table cellspacing="0" class="advanced border0R border0L">
<tbody><tr>
<td>Longs Won:</td>
<td align="right">
<span class="gray">(687/1247) </span> 55%
</td>
</tr>
<tr class="bg1">
<td>Shorts Won:</td>
<td align="right">
<span class="gray">(932/1638) </span> 56%
</td>
</tr>
<tr>
<td>Best Trade(€):</td>
<td class="alignR"> <span class="gray">(Jul 20)</span> 17.93
</td>
</tr>
<tr class="bg1">
<td> Worst Trade(€):</td>
<td class="alignR"> <span class="gray">(Jul 19)</span> -32.08
</td>
</tr>
<tr>
<td>Best Trade (Pips):</td>
<td class="alignR"> <span class="gray">(Sep 07)</span> 177.5
</td>
</tr>
<tr class="bg1">
<td>Worst Trade (Pips):</td>
<td class="alignR"> <span class="gray">(Sep 06)</span> -190.0
</td>
</tr>
<tr>
<td>Avg. Trade Length:</td>
<td class="alignR">
22h 45m
</td>
</tr>
</tbody></table>
</td>
<td>
<table cellspacing="0" class="advanced border0R">
<tbody><tr class="bg1">
<td><span class="dotted" id="pfTip">Profit Factor:</span></td>
<td class="alignR">
1.19
</td>
</tr>
<tr>
<td><span class="dotted" id="sdTip">Standard Deviation:</span></td>
<td class="alignR">€4.30</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="sharpTip">Sharpe Ratio:</span></td>
<td class="alignR">
0.00
</td>
</tr>
<tr>
<td><span class="dotted" id="zTip">Z-Score (Probability):</span></td>
<td class="alignR">
-31.21 (99.99%)
</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="expTip">Expectancy:</span></td>
<td class="alignR">3.7 Pips / €0.30</td>
</tr>
<tr>
<td><span class="dotted" id="ahprTip">AHPR:</span></td>
<td class="alignR">0.01%</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="ghprTip">GHPR:</span></td>
<td class="alignR">0.01%</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I've tried without succeed: The below is the one I have tried it.
//*[#id="trades"]/tbody/tr/td[1]/table/tbody/tr[5]/td[2]
//*[#id="trades"]/tr/td[1]/table/tbody/tr[5]/td[2]
and many others.. ;-)
This XPath,
substring-before(//table[#id="trades"]
//td[.="Average Win:"]/following-sibling::td[1], " /")
will select
36.68 pips
as requested, and you should find it to be more robust than many alternatives. For example, the table structure can change substantially, and as long as the label and the relative positions of the two table cells remain the same, this XPath will continue to function.
i had to remove both "tbody"
//*[#id='trades']/tr/td/table/tr[4]/td[2]

Force an element to take exactly half of available height in print media

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

HTML & CSS: row in colum in the table

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.

Columns not lining up HTML table

I have the following table in HTML, but the columns don't line up at all well, you can see it here:
http://purepremier.com/#/teams
Is there any reason why this might be?
<table class="league">
<thead>
<tr>
<th>Pos</th>
<th>Team</th>
<th>P</th>
<th>F</th>
<th>A</th>
<th>GD</th>
<th>Pts</th>
</tr>
</thead>
<tbody>
<td class="ng-binding">1</td>
<td class="teams">
<a href="#/teams/65" ng-click="hidePrefs()" class="ng-binding">
Manchester City
</a>
</td>
<td class="ng-binding">4</td>
<td class="ng-binding">10</td>
<td class="ng-binding">0</td>
<td class="ng-binding">10</td>
<td class="ng-binding">12</td>
</tr>
<tr ng-repeat="team in teamsList.standing" class="ng-scope">
<td class="ng-binding">2</td>
<td class="teams">
<a href="#/teams/354" ng-click="hidePrefs()" class="ng-binding">
Crystal Palace
</a>
</td>
<td class="ng-binding">4</td>
<td class="ng-binding">8</td>
<td class="ng-binding">5</td>
<td class="ng-binding">3</td>
<td class="ng-binding">9</td>
</tr>
............
</tbody>
</table>
The below should fix the issue
In app.css line 921 change the display:inline-block; to display:table-cell;
display:table-cell; is the default behaviour of the <td> element