CODEWITHSUNDEEP
htmlcsshtml-tablehtml-email
Anna-Ha
Anna-Ha

Reputation: 55

can't reduce the table height using media queries

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>

Upvotes: 1

Views: 359

Answers (2)

Johannes
Johannes

Reputation: 67778

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.

Upvotes: 1

Kevin
Kevin

Reputation: 72

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>

Upvotes: 1

Related Questions