How to select table rows excluding first row. Number of table rows could vary.
Here is example:
<table id="grdVerzekeringen" >
<tr>
<th>First name</th><th>Last name</th>
</tr>
<tr>
<td>Pera</td><td>Peric</td>
</tr>
<tr>
<td>Mika</td><td>Mikic</td>
</tr>
<tr>
<td>Zika</td><td>Zikic</td>
</tr>
</table>
In this example I want to select table rows that have actual data not header data. I could use css selectors or XPath.
If the header row uses th, you are lucky. Just use the following XPath expression:
table[#id="grdVerzekeringen"]/tr[td]
If the header uses td as well, you can use the position() function:
table[#id="..."]/tr[position()>1]
Related
I am trying to create a table in reactjs using bootstrap. Everything seems fine except:
As you can see, the titles inside the thead tag is not aligned exactly above its corresponding td tag. Is there a way to do it?
Here is the code:
<Table striped hover responsive >
<thead>
<tr>
<th>Rank</th>
<th>Logo</th>
<th>Name</th>
<th ></th>
<th>Wins</th>
<th>Loss</th>
<th>Draws</th>
<th>Games</th>
<th>GF</th>
<th>GA</th>
</tr>
</thead>
<tbody>
{team && team.map((team, key) =>{
return <tr key={key}>
<td>{key + 1}</td>
<td><img src={team.team.logos[0].href} alt='team logo' width={40} height={40}/></td>
<td >{team.team.name}</td>
<td>{team.stats[0].value}</td>
<td>{team.stats[1].value}</td>
<td>{team.stats[2].value}</td>
<td>{team.stats[3].value}</td>
<td>{team.stats[4].value}</td>
<td>{team.stats[5].value}</td>
</tr>
})}
</tbody>
</Table>
I cannot see the code, but there seems to be some margin for the td. But you will still have issues with it lining up due to the number of words in td to the data listed. A solution would be styling each td by itself until you get it how you'd like.
I am transforming HTML into a beautiful and tidy CSV. I have a file full of tables and with few classes. I have three types of tables, and their structure is the same. The only difference is the content within the "th" element which comes after the element in which I am interested. How can I get only the content of the tables that have certain text in "th" ("text_that_I_want_to_get")? Is there a way to insert a class with R inside each type of table?
Type 1 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">name</th>
<th class="string">mean</th>
<th class="string">stdev</th>
</tr>
</thead>
<tbody>
Type 2 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">name</th>
<th class="array">answers</th>
</tr>
</thead>
<tbody>
Type 3 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">Reference</th>
</tr>
</thead>
<tbody>
You need the following three xpaths:
xpath1 <- "//td[table[./thead/tr/th/text() = 'stdev']]/preceding-sibling::th"
xpath2 <- "//td[table[./thead/tr/th/text() = 'answers']]/preceding-sibling::th"
xpath3 <- "//td[table[./thead/tr/th/text() = 'Reference']]/preceding-sibling::th"
These find the td node that is at the root of each of the three table types, then locate the preceding th sibling with the text you want.
So to get "text_that_I_want_to_get" for table type 1, you do:
read_html(url) %>% html_nodes(xpath = xpath1) %>% html_text()
#> [1] "text_that_I_want_to_get"
And you can do the same with xpath2 and xpath3 to get text from table type 2 and table type 3.
I am generating pdf using pdfreactor, and I have one problem. The result that I am getting from my backend service is a very long HTML table, something like $this:
<table>
<tbody>
<tr>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
<th>07</th>
<th>08</th>
<th>09</th>
<th>10</th>
<th>11</th>
<th>12</th>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX (XXXX)</td>
<td>XXXXXXX (XXXXXXX)</td>
<td>XXXXXXXXXXXXXXXXXX</td>
<td>XXXXXXXXXXXXXXX</td>
<td>XXXXXXXXXXX</td>
<td>XXXXXXXX</td>
<td>XXX XXXXXXX</td>
<td>XXXXX</td>
</tr>
<tr>
<td colspan="12"><strong>XXXXXXXXX</strong></td>
</tr>
<tr>
<td>XXX</td>
<td>-XXXXXXXX</td>
<td>XXXXXX</td>
<td>-XXXXXX XXX</td>
<td>-XXXX</td>
<td>-XXXXXXXXXX</td>
<td>-XX X X</td>
<td>-XXXXXXXXXX</td>
<td>-XXXXXXX XXXXXXXXXX</td>
<td>-XXXXXX</td>
<td>-XXXXXXXX</td>
<td>-X</td>
</tr>
</tbody>
</table>
So, the client want's me to if the content is overflowing the page, split the table into two, or more tables.
If it was HTML document and not pdf, I could use Javascript to determine the width of the table element, and then split it, but I can't.
Is there any way some css master knows is this possible to do with css?
I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...
This question already has answers here:
Why doesn't table > tr > td work when using the child selector?
(2 answers)
Closed 8 years ago.
I can't figure out why I can't achieve selecting rows that are direct children of a table (given that other sub-table are included in TD's of main table, I just want direct children rows, not rows of descendant tables).
Here the remaining structure after radical simplification (also see jsfiddle here):
<body>
<table>
<tr>
<td>TR 1 - TD 1 </td>
<td>TR 1 - TD 2 </td>
</tr>
<tr>
<td>TR 2 - TD 1</td>
<td>
<table>
<tr>
<td>Table 2 - A </td>
<td>Table 2 - B </td>
</tr>
<tr>
<td>Table 2 - C</td>
<td>Table 2 - D</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I'm not able to select rows that are direct children of the main table:
- body>table tr {background-color:lightgray;} logically selects all rows of table and sub-table
- body>table tr tr {color:blue;} logically selects all rows of sub-table only
- but body>table>tr {color:red;} doesn't select anything at all (no red text to be seen)
What am I doing wrong? On the structure? On the selectors?
->jsfiddle
a tbody element may be automatically inserted when it is not in the markup (the side effect is that a table > tr selector could fail), so try to change last rule with body > table > tbody tr.
example: http://jsfiddle.net/wn84hotm/2/