I have a table with height = 100px, a td with height 20px, and two tdd width height = 50% (40px each) I want to reduce the height to 80px on mobile screens, no change for the 20px, and want the 50% height tds to be reduced

I added a media query for mobile screens, changed the table height to 80px, but it hasn't changed. But when I increase the height (lets say to 140px) it works and the heights change. So reducing the table height doesn't change anything, increasing it does, why does that happen and how can I fix this?

code:

@media screen and (max-width: 375px) {
          table {
              height: 80px !important;
          }
      }

<table
  align="center"
  border="0"
  cellpadding="0"
  cellspacing="0"
  style="margin: 0; padding: 0; border-collapse: collapse; height: 100px"
  width="100%"
>
  <tr>
    <td align="center" valign="top">
      <table
        width="600"
        border="0"
        cellspacing="0"
        cellpadding="0"
        style="border-collapse: collapse"
      >
        <tr>
          <td
            align="center"
            valign="top"
            style="line-height: 40px"
            height="50%"
          >
            &nbsp;
          </td>
        </tr>
        <tr>
          <td
            align="center"
            valign="top"
            style="background-position: top center; background-size: cover"
          >
            <img
              src="..."
              alt="..."
              border="0"
              style="display: block; padding: 0; margin: 0"
              align="center"
              height="20"
              text-align="center"
            />
          </td>
        </tr>
        <tr>
          <td
            align="center"
            valign="top"
            style="line-height: 40px"
            height="50%"
          >
            &nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CodePudding user response：

Table cells adjust to their content. You have a line-height of 40px in two of the cells. You'll need to reduce that too if you want them to become less high.

CodePudding user response：

wrap the <table> inside a <div> and apply the height styling to that <div>. If you do not want the content to overflow the height of the parent, add also an overflow property.

<div style="height:80px;overflow:auto;">
<table>.....</table>
</div>