html table rowspan but do not stretch the row background-CodePudding

I have created a table where the middle row spans over 2 rows. I would like to span the content in the row over 2 rows, but not span the background

This is what my table looks like currently current table

I would like to keep the specific row colours like in this picture while also using row span to stretch the column like in the first picture how I want the row backgrounds to look

Is this possible? I am using this table in an email template so I do have limited solutions

here is the current code

 <table>
  <tr bgcolor="red">
    <td>left</td>
    <td rowspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr bgcolor="green">
    <td>left</td>
    <td>right</td>
  </tr>
</table>

CodePudding user response：

You have to use colspan instead of rowspan:

<table>
  <tr bgcolor="red">
    <td>left</td>
    <td colspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr bgcolor="green">
    <td>left</td>
    <td colspan="2"></td>
    <td>right</td>
  </tr>
</table>

CodePudding user response：

I think this code will help you to get your desired table look.

<table>
    <tr bgcolor="red">
      <th>left</th>
      <th>MIDDLE</th>
      <th>right</th>
    </tr>
    <tr bgcolor="green">
      <td>left</td>
      <td></td>
      <td>right</td>
    </tr>
</table>

CodePudding user response：

Target the <td> so it overlaps the <tr> color and use linear-gradient value to have a 50% red and 50% green background:

tr:first-of-type td:nth-of-type(2) {
  background-image: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
  background-size: 100%;
}

Also, if you are serious about using advanced CSS, do not have inline styles in your HTML. They will override styles from <style> tag and <link>.

tr:first-of-type {
  background: red;
}

tr:first-of-type td:nth-of-type(2) {
  background-image: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
  background-size: 100%;
}

tr:last-of-type {
  background: green
}

<table>
  <tr>
    <td>left</td>
    <td rowspan="2">
      <div>MIDDLE</div>
    </td>
    <td>right</td>
  </tr>
  <tr>
    <td>left</td>
    <td>right</td>
  </tr>
</table>