Html table resize of cells-CodePudding

I have an html talbe that looks like this

<table >
        <tr>
          <td >
            <img
              src="http://www.pfimba.ch/fileadmin/Grafiken/Icons/logo_rgb_email_signatur.png"
              alt="logo"
              style="height: 75px"
            />
          </td>
          <td >
            Max Mustermann v/o KingJulian <br />
            Abteilungsleiter <br />
            <a href="mailto:xxx">xxx</a>
          </td>
        </tr>
        <tr style="height: 30px">
          <td  colspan="2">
            <img
              src="http://www.pfimba.ch/fileadmin/Grafiken/Icons/00_abteilung_strich.png"
              alt="strich"
            />
          </td>
        </tr>
</table>

The goal is that the first column of the first row which contains the logo will always a fixed with. The cell next to it containing the personal information should get wider if the name gets longer. And the second row should just be as wide as the first row.

However, the problem is that the image in the second row is very wide and my whole table always ends up as wide as the second row. Is it possible to set a css property such that the second row is just as wide as the first one meaning that no matter how wide the image in the second row is, it will be scaled down such that it fits into the with given by the first row of the table?

CodePudding user response：

Add style width: 100% to the <img> tag. You have to take control over that tag.

Also in the CSS code, I've already explain what I'm doing

table,
th,
td {
  border: 1px solid;
  /* I added the border for clarify, you can remove it */
}

table {
  width: min-content;
  /* control the width of the table*/
}

.logo>div {
  width: 200px/* use this to control the width of the logo */
}

tr:first-child td:last-child {
  white-space: nowrap;
}

tr:last-child img {
  width: 100%
}

<table >
  <tr>
    <td >
      <div>
        <img src="http://www.pfimba.ch/fileadmin/Grafiken/Icons/logo_rgb_email_signatur.png" alt="logo" style="height: 75px" />
      </div>
    </td>
    <td >
      Max Mustermann v/o KingJulian <br /> Abteilungsleiter <br />
      <a href="mailto:xxx">xxx</a>
    </td>
  </tr>
  <tr style="height: 30px">
    <td  colspan="2">
      <img src="http://www.pfimba.ch/fileadmin/Grafiken/Icons/00_abteilung_strich.png" alt="strich" />
    </td>
  </tr>
</table>

CodePudding user response：

One way is to put the image as background to those two columns rather than as a separate element. That way the system does not pick up any sizing from the actual image dimensions.

You can use either background-image: cover or contain depending on whether you want that td to be filled with as much of the image as possible or whether you want to show the whole image.

<table >
  <tr>
    <td >
      <img src="http://www.pfimba.ch/fileadmin/Grafiken/Icons/logo_rgb_email_signatur.png" alt="logo" style="height: 75px" />
    </td>
    <td >
      Max Mustermann v/o KingJulian <br /> Abteilungsleiter <br />
      <a href="mailto:xxx">xxx</a>
    </td>
  </tr>
  <tr style="height: 30px; width: 100%;">
    <td  colspan="2" style="background-image: url(http://www.pfimba.ch/fileadmin/Grafiken/Icons/00_abteilung_strich.png); background-size: cover; background-repeat: no-repeat;">
    </td>
  </tr>
</table>