I am in need of a solution to convert a CSS-styled data display into a table-like format that can be used in a word processor. The issue is that the word processor does not recognize the structure created using CSS, resulting in a distorted layout. My goal is to create a bookmarklet that can dynamically convert <div> elements into semantic <tr>–<th>–<td> combinations.
For example, here is the source HTML:
<div class="row review-row">
<div class="col-6 review-label">old or new?</div>
<div class="col-4">new</div>
</div>
<div class="row review-row">
<div class="col-6 review-label">id?</div>
<div class="col-s4">16</div>
</div>
<div class="row review-row">
<div class="col-6 review-label">why do you cancel?</div>
<div class="col-4">because</div>
</div>
<div class="row review-row">
<div class="col-6 review-label">why bother</div>
<div class="col-4">i have to :(</div>
</div>
Here is the desired HTML structure that the bookmarklet should generate:
<table>
<tr>
<th>old or new?</th>
<td>new</td>
</tr>
<tr>
<th>id?</th>
<td>16</td>
</tr>
<tr>
<th>why do you cancel?</th>
<td>because</td>
</tr>
<tr>
<th>why bother</th>
<td>i have to :(</td>
</tr>
</table>