CODEWITHSUNDEEP
htmlcsshtml-table
CSG
CSG

Reputation: 67

html table <td> expands with image, no matter the size of the image

I am building an html table to be used in an html email. I'm encountering a weird problem where anytime I put an image into a <td> it expands the td(and those below it to maximum width, rendering all columns to the right to their minimum width. The Google Chrome Inspector tool is indicating that the image is much wider than it really is. I have resized the image to 100x136px but the still expands to 1078px. I have also tried other images but get the same result. What could be causing this? Below is my code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            table {
                width: 100%;
                margin: 20px auto;
                border-collapse: collapse;
            }
            td {
                border: 1px solid black;
            }

            .header {
                height: 150px;
            }
            .bar {
                height: 40px;
            }
            .greeting {
                height: 300px;
            }
            .itemRow {
                height: 250px;
            }
            .footer {
                height: 75px;
            }
            .measure {
                height: 25px;
            }

            img {
            }
        </style>
    </head>
    <body>
        <table>
            <tr class="header">
                <td colspan="2" class="crest"><img src="crest.jpg" alt="" /></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="bar">
                <td colspan="14"></td>
            </tr>
            <tr class="greeting">
                <td colspan="14"></td>
            </tr>
            <tr class="itemRow">
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr class="measure">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="itemRow">
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr class="measure">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="itemRow">
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>

            <tr class="footer">
                <td colspan="12"></td>
                <td colspan="1"></td>
                <td colspan="1"></td>
            </tr>
        </table>
    </body>
</html>

Upvotes: 1

Views: 2255

Answers (1)

Johannes
Johannes

Reputation: 67748

That's due to the nature of automatic table layout - the cells will shrink and grow according to their contents. But you can use table-layout: fixed; on the tabletag to avoid that and width: 100%; height: auto on the image itself to fit it into the cell:

table {
  width: 100%;
  margin: 20px auto;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  border: 1px solid black;
}

.header {
  height: 150px;
}

.bar {
  height: 40px;
}

.greeting {
  height: 300px;
}

.itemRow {
  height: 250px;
}

.footer {
  height: 75px;
}

.measure {
  height: 25px;
}

img {
  width: 100%;
  height: auto;
}
<table>
  <tr class="header">
    <td colspan="2" class="crest"><img src="https://placehold.it/500x300/ea8" alt="" /></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bar">
    <td colspan="14"></td>
  </tr>
  <tr class="greeting">
    <td colspan="14"></td>
  </tr>
  <tr class="itemRow">
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr class="measure">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="itemRow">
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr class="measure">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="itemRow">
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>

  <tr class="footer">
    <td colspan="12"></td>
    <td colspan="1"></td>
    <td colspan="1"></td>
  </tr>
</table>

Upvotes: 2

Related Questions