Show icon across two rows in a mui table

Solution 1:

There are two possible ways to achieve this effect. One is to use an absolutely positioned chain icon element and then offset its coordinates so that it "floats" between the two table row elements. It may take some playing around with the attributes but it would look something like

.chain-icon {
  position: absolute;
  left: 100px;
  top: 10px;
  z-index: 100;
}

The other option that might work is to place the chain icon inside the row and offset it with negative margins margin-top: -50px; and make sure overflow attribute is set correctly. Since it's a table, for either approach I would suggest adding a new column next to dessert and adding the icon to that row cell.