I need to create a table with two columns of data, but I want to wrap it only after a specific row in the data set. For example, I may want to start wrapping from the middle or from a certain <tr>
, like the one that contains <td>Here:</td>
.
<table>
<tbody>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>Here:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
<tr>
<td>A:</td>
<td>B</td>
</tr>
</tbody>
</table>
Can this be achieved with pure CSS or perhaps JS?