I am modifying a website using a Userscript, sorting a table and joining the first column of rows of same type. The result is something like this:
table, td { border: 1px solid black; border-collapse: collapse; padding: 3px }
.alternate td.image { display: none }
<table>
<tr><td rowspan="3" class="image">Image 1</td><td>Info 1.1</td></tr>
<tr class="alternate"><td class="image">Image 1</td><td>Info 1.2</td></tr>
<tr class="alternate"><td class="image">Image 1</td><td>Info 1.3</td></tr>
<tr><td rowspan="2" class="image">Image 2</td><td>Info 2.1</td></tr>
<tr class="alternate"><td class="image">Image 2</td><td>Info 2.2</td></tr>
</table>
So first I add the class alternate to rows that aren't the first one, and then I calculate the rowspan. My question is: could I achieve this using only CSS, and make the first column automatically span over all the alternate rows below, without having to calculate the rowspan?