Is it possible to control nowrap of table cells depending on if the cell (td) has a colspan attribute or not?
Current css
.k2table {table-layout: fixed; width:100%;border-collapse: collapse}
.k2table tr {height:18px}
.k2table td {text-align: left;padding:1px;white-space: nowrap;}
.k2table td+td {text-align: right;width:70px;}
.k2table td+td+td {text-align: right;width:70px;}
If I have a table such as below I don't want nowrap on the td with colspan.
<table class="k2table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
You can do that using an [attr] selector
.k2table td[colspan] { white-space: normal }
If you need to be more specific you can apply your style just to the cell with THAT colspan
.k2table td[colspan="3"] { white-space: normal }
Related
I have below code and I want find second td value. How can I select text with <br/> in it?
<tr>
<td valign="top" style="width: 85px">
<span class="fieldtext">Address:</span>
</td>
<td valign="top">
Shaftesbury House, 1st floor
<br/>20 Tylney Road
<br/>Bromley
<br/>Greater London
<br/>BR1 2RL
<br/>United Kingdom
<br/>
</td>
<td style="width: 200px; vertical-align: top; text-align: right;" rowspan="2" />
</tr>
Assuming you want to find the td element by the Address: label defined previously, you can use the following-sibling axis:
//td[span = 'Address:']/following-sibling::td
Then, after locating the element, call getText() method:
$driver->findElement(WebDriverBy::xpath("//td[span = 'Address:']/following-sibling::td"))->getText();
Try as below :-
$driver->findElement(WebDriverBy::xpath('//tr/td[2]'))->getText();
Hope it helps....:)
I'm trying to create a basic layout or four tables which sit side by side (with a small margin between the tables. Each table will have one row in the top section containing a currency symbol which will stretch the full length of the table and then below a second row will be subdivided into two cells with an input box and submit button.
There are two issues which I can't seems to find a solution for:
The top row divides into two cells. This means when the symbol is centered it centers to the left cell as opposed to the centre of the table (top row should stretch the full width of the table)
The row/ cells below contain a large amount of empty space above the input box and button which I can't seem to remove (have tried setting margin / borders to 0 etc.
Here is the code (borders added for clarity):
HTML
<table id = "pound_table">
<tr>
<td id = "pound_symbol">£</td>
</tr>
<tr id = "input">
<td id = "input"><input type = "text" name = "pound" size = "6" /></td>
<td><input type = "submit" value = "CONVERT" /></td>
</tr>
</table>
<table id = "euro_table">
<tr>
<td id = "euro_symbol">€</td>
</tr>
<tr>
<td><input type = "text" name = "euro" size = "6" /></td>
<td><input type = "submit" value = "CONVERT" /></td>
</tr>
</table>
<table id = "dollar_table">
<tr>
<td id = "dollar_symbol">$</td>
</tr>
<tr>
<td><input type = "text" name = "dollar" size = "6" /></td>
<td><input type = "submit" value = "CONVERT" /></td>
</tr>
</table>
<table id = "yen_table">
<tr>
<td id = "yen_symbol">¥</td>
</tr>
<tr>
<td><input type = "text" name = "yen" size = "6" /></td>
<td><input type = "submit" value = "CONVERT" /></td>
</tr>
</table>
CSS
table
{
border-spacing: 0px;
border: 1px solid black;
margin-right:20px;
}
tr {
margin: 0;
padding:0;
border-spacing: 0px;
border: 1px solid black;
}
td {
border: 1px solid black;
margin: 0;
padding:0;
border-spacing: 0px;
}
#pound_symbol,
#euro_symbol,
#dollar_symbol,
#yen_symbol
{
text-align: center;
}
#pound_table,
#euro_table,
#dollar_table,
#yen_table
{
display: inline-block;
font-size:72px;
}
also see the fiddle;
http://jsfiddle.net/qs0dehhx/1/
Fixed, take a look: https://jsfiddle.net/zer00ne/aonc6we7/1/
HTML
For the the first row: <td colspan="2" id=...>
CSS
input { display: block; min-height: 100%; }
Here is a sample: JsFiddle
I have a table with 3 columns. Each should have 500px. But my table is resized to fit within the parent div (600px).
The width of my table should be 1500 (3x500) and a scrollbar should be displayed in parent div. How can I resolve this without adding a "width=XXX"?
<div id="container">
<table id="table">
<colgroup>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
</colgroup>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Apply min-width to the table tag (it doesn't work on col as explained in my comment on the OP).
Updated CSS:
#table {
table-layout:fixed;
margin:3px;
border-collapse:collapse;
min-width: 1500px;
}
Tested in Chrome and Firefox, and should be widely supported (according to caniuse).
Edit I've realised this answer doesn't actually answer your question, as it works around the col tag problem rather than solving it. I hope it helps anyway though.
I have to select the above highlighted link New V1 Project but I am not able to identify the element.
I've tried using linktext function but it is giving error... can anybody help?
Hierachy is something like:-
<tbody>
<tr>
<td width="40" align="center">
<td width="5">
<td align="center" noWrap="" style="border-bottom-color: black; border-bottom-width: 1px; border-bottom-style: solid;" bgColor="#cccccc">
<a class="navSelected" onmouseover="window.status=''; return true" onmouseout="window.status=''; return true" href="index.cfm?fuseaction=project.view&version=1">
<td width="5">
<td width="5">
<td align="center" noWrap="" style="border-bottom-color: black; border-bottom-width: 1px; border-bottom-style: solid;" bgColor="#cccccc">
<a class="nav" onmouseover="window.status=''; return true" onmouseout="window.status=''; return true" href="index.cfm?fuseaction=project.create_form&version=1">
<td width="5">
<td width="5">
<td align="center" noWrap="" style="border-bottom-color: black; border-bottom-width: 1px; border-bottom-style: solid;" bgColor="#cccccc">
<a class="nav" onmouseover="window.status=''; return true" onmouseout="window.status=''; return true" href="index.cfm?fuseaction=project.create_form&version=2">
</tr>
</tbody>
please see the highlighted HTML code in image... I am not sure how this Text element is linked with a tag
My Code that I've used to identify element is:
WebElement v1Link = driver.findElement(By.linktext("New V1 Project"));
WebElement v1Link = driver.findElement(By.xpath("//tr/td[3]/a[#text()= 'New v1 Project']"));
but none of the above 2 methods are working... please somebody help.
You can find the link by the following xpath:
//td/a[normalize-space(text()) = 'New V1 Project']
FYI, your version of xpath was almost correct:
no need to put # before the text()
the text is New V1 Project, not New v1 Project
you need to use normalize-space()
Hope that helps.
Try using cssselector-
WebElement v1Link = driver.findElement(By.cssSelector("a.nav[href='index.cfm?fuseaction=project.create_form&version=2']"));
the pagesource:
<TABLE class=mini-listbox-items style="WIDTH: 100%" cellSpacing=0 cellPadding=0>
<TBODY>
<TR class="mini-listbox-item mini-listbox-item-selected" id=mini-45$0 index="0">
<TD class=mini-listbox-checkbox><INPUT id=mini-45$ck$0 type=checkbox CHECKED></TD>
<TD class="">xx</TD></TR>
<TR class=mini-listbox-item id=mini-45$1 index="1">
<TD class=mini-listbox-checkbox><INPUT id=mini-45$ck$1 type=checkbox></TD>
<TD class="">yy</TD></TR></TBODY></TABLE></DIV><INPUT type=hidden value=Y></DIV>
<DIV class=mini-errorIcon></DIV></DIV></DIV>
<DIV class=mini-shadow style="DISPLAY: none; Z-INDEX: 1002; LEFT: 393px; WIDTH: 78px; TOP: 326px; HEIGHT: 46px"></DIV></BODY>
my code:
driver.findElements(By.xpath(("//td[#class='mini-listbox-checkbox']/following-sibling::td[position()=1]"))).size();
driver.findElements(By.xpath(("//td[#class='mini-listbox-checkbox']/following-sibling::td[position()=1]"))).get(0).getText();
the first line,it prints 2,then the second line,it prints none,why?
Your logic is working fine.
int n=driver.findElements(By.xpath(("//td[#class='mini-listbox-checkbox']/following-sibling::td[position()=1]"))).size();
String s=driver.findElements(By.xpath(("//td[#class='mini-listbox-checkbox']/following-sibling::td[position()=1]"))).get(0).getText();
System.out.println(n+"======>>"+s);
The above code is giving correct output only.
2======>>xx