html - Incorrect row height when using multiple rowspan -

edit: please, consider example of last edit.

this worked chrome, edge or ie, never firefox, , bug started happening on chrome's last update (57). when i'm using multiple rowspan , table cell has 2 or more lines, consecutive row height not working properly.

honestly, english working in progress , it's hard explain, created example:

https://codepen.io/anon/pen/xqozzj

css

table {   border-collapse: collapse;   border-spacing: 0;   border: 1px solid #dddddd; }  table td, table th {   border: 1px solid #dddddd; }  .column-product {   width: 30px; } 

html

<table>   <thead>     <tr>       <th class="column-product">product</th>       <th>color</th>       <th>qty</th>       <th>price</th>     </tr>   </thead>   <tbody>     <!-- 1st product -->     <tr>       <td rowspan="3">epic shorts</td>     </tr>     <tr>       <td rowspan="2">blue</td>     </tr>     <tr>       <td>1</td>       <td>10.20</td>     </tr>     <!-- 2nd product -->     <tr>       <td rowspan="5">cool t-shirt</td>     </tr>     <tr>       <td rowspan="2">black</td>     </tr>     <tr>       <td>1</td>       <td>10.00</td>     </tr>     <tr>       <td rowspan="2">green</td>     </tr>     <tr>       <td>2</td>       <td>7.10</td>     </tr>   </tbody> </table> 

as can see, product "epic shorts" have 1 variation - has 2 lines, , consecutive row's height not following principal row height. issue didn't happen product "cool t-shirt", because has 2 variations (black , green).

what desirable result?

https://codepen.io/anon/pen/mpmywx

the change did forcing height of row:

<!-- 1st product --> <tr>   <td rowspan="3">epic shorts</td> </tr> <tr>   <td rowspan="2">blue</td> </tr> <tr style="height: 39px;"> <!-- here -->   <td>1</td>   <td>10.20</td> </tr> 

honestly, it's not viable solution because can't predict principal row's height- it's automatic.

it's working on edge or internet explorer (sweet irony).

any appreciated. i'll best explain better.

thank you.

edit: image show differences:

edit:

first of all, appreciate answers. second, apologies, missed example: https://codepen.io/anon/pen/opexgy

i added variantion of "black" of "cool t-shirt", , can happen.

you should read basic tutorials building table .

you have 4 headers, expect rows(tr) of 4 cells too.

your tables here made of 4 rows , 1 tr = 1 row . need 4 <tr> build it

rowspan can used once here, when 1 product has different colors example.

th,td {border:1px solid;}

<table>    <thead>      <tr>        <th class="column-product">product</th>        <th>color</th>        <th>qty</th>        <th>price</th>        <!-- total : 4 cells -->      </tr>    </thead>    <tbody>      <!-- 1st product -->      <tr>        <th>epic shorts</th><!-- can use header here -->        <td>blue</td>        <td>1</td>        <td>10.20</td>        <!-- total : 4 cells -->      </tr>      <!-- 2nd product -->      <tr>        <th rowspan="2">cool t-shirt</th><!-- span next row -->        <td>black</td>        <td>1</td>        <td>10.00</td>        <!-- total : 4 cells -->      </tr>      <tr>        <!-- [cool t-shirt] spanning down here -->        <td>green</td>        <td>2</td>        <td>7.10</td>        <!-- total : 4 cells (1 spanning)-->      </tr>    </tbody>  </table>