Split long html table into two or more tables - css

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?

Related

The value in the td tag is not correspondingly above table head (react-bootstrap)

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.

How to get HTML element considering later content of another tag and not the class?

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.

SNMP/mrtg/traffic reporting incorrect on interfaces

I've installed MRTG, added some options and customizing of mrtg.cfg. Interface speed is 1 Gb/s. I wanted to show the graph and data in bits, not bytes. I ended up with graphs as example show 8Mb/s rather than 80 Mb/s. Where is the mistake in my mrtg.cfg?
Target[10.0.1.1_7]: 7:public#10.0.1.1:
YLegend[10.0.1.1_7]: Bits per Second
Colours[10.0.1.1_7]: GREEN#00eb0c,BLUE#1000ff,DARK GREEN#006600,VIOLET#ff00ff
Background[10.0.1.1_7]: #a0a0a0a
Kilo[10.0.1.1_7]: 1024
SetEnv[10.0.1.1_7]: MRTG_INT_IP="a.b.c.d" MRTG_INT_DESCR="eth1"
MaxBytes[10.0.1.1_7]: 125000000
Title[10.0.1.1_7]: WAN -- Oslo
PageTop[10.0.1.1_7]: <h1>WAN -- OSL</h1>
<div id="sysdetails">
<table>
<tr>
<td>System:</td>
<td>Cisco RV320 OSL </td>
</tr>
<tr>
<td>Maintainer:</td>
<td></td>
</tr>
<tr>
<td>Description:</td>
<td>eth1 </td>
</tr>
<tr>
<td>ifType:</td>
<td>ethernetCsmacd (6)</td>
</tr>
<tr>
<td>ifName:</td>
<td>eth1</td>
</tr>
<tr>
<td>Max Speed:</td>
<td>1000 Mbit/s</td>
</tr>
<tr>
<td>Ip:</td>
<td>a.b.c.d (No DNS name)</td>
</tr>
</table>
</div>
I also added following options:
options[_]: growright,bits,transparent,nobanner,nolegend
The answer was actually in the way mrtg.cfg was read and my understanding. MRTG by default during CFGMAKER creates new line of options and create the RunAsDaemon at the bottom of the mrtg.cfg.
Then I came upon this text: The later setting replaces the previous one for the rest of the configuration file
This means it run as default through the config file, and then changes when reading my values at the end.
Solution: All global settings need to be above SNMP/interface/etc settings to be valid.

Bootstrap : complex table

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...

Select table rows excluding first row

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]

Resources