如何让图片铺满HTML表格宽度？证书页面布局问题求助

你制作的HTML证书表格中，底部图片无法达到参考证书的铺满宽度效果，问题出在外层表格的全局间距设置以及嵌套结构上，以下是修复方案：

关键修改点 #

• 移除外层表格的cellpadding和cellspacing属性，改用CSS统一控制单元格间距，避免全局间距挤压底部图片的可用宽度
• 底部图片所在单元格清除内边距，确保图片可以完全贴合表格边缘
• 简化嵌套结构，无需额外嵌套表格，直接让图片占满单元格宽度
• 给图片添加display: block，消除图片默认行内元素带来的底部空白

修改后的完整代码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>LankaBangla Finance</title>
</head>

<body style="background-color: lightgrey">

  <table style="width:794px;height: 800px;margin:1.5% auto;background-color: #ffffff;border:1px solid #ededed; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;">
    <tr>
      <td style="padding: 40px 40px 0 40px;" align="left">
        <img width="200px" src="https://i.imgur.com/7zzr0JS.png" alt="lanka-bangla">
      </td>
      <td style="padding: 40px 40px 0 0;" colspan="3" align="right">
        <div>
          <img width="220" src="https://i.imgur.com/7hx10YB.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td style="padding: 0 40px;" colspan="4">
        <h1 style="text-transform: uppercase; letter-spacing: 3px; font-weight: bold;line-height: 48px;margin-bottom: 5px;display:block; font-size: 48px;color: #5d1c58">
          Certificate</h1>
        <h2 style="text-transform: uppercase; font-weight: lighter; color:#f69c38;letter-spacing: 5px; line-height: 34px;margin: 5px;display:block; font-size: 34px">
          of completion</h2>
      </td>
    </tr>
    <tr>
      <td style="padding: 0 40px;" colspan="4">&nbsp;</td>
    </tr>

    <tr>
      <td style="padding: 0 40px;" colspan="4">
        <strong style="font-size: 22px;font-style:italic; color:#666666">This is to certifies that</strong>
        <h1 style="font-size: 40px; color:#008540">Mr Khairul Hasan</h1>
        <p style="font-size: 20px;color:#737373;">has successfully completed 14 mandatory modules through LBFL e-Learning Academy</p>
      </td>
    </tr>
    <tr>
      <td style="padding: 0 40px;" colspan="4">&nbsp;</td>
    </tr>

    <tr>
      <td style="padding: 0 40px;" colspan="4">
        <h2 style="text-transform: uppercase;color:#d94579; letter-spacing: 1px; font-weight: bold;line-height: 24px;margin-bottom: 5px;display:block; font-size: 24px">
          MODULE COVERED</h2>
        <strong style="color:#5b5b5b; font-size: 18px; font-weight:bold;display: inline-block;line-height: 1.2">Internal Control And Compliance</strong>
      </td>
    </tr>
    <tr>
      <td style="padding: 0 40px;" colspan="4">&nbsp;</td>
    </tr>

    <tr>
      <td style="padding: 0 40px;" colspan="4">
        <div>
          <img width="130" src="https://i.imgur.com/o5kcDS3.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td style="padding: 0 40px;" colspan="4">&nbsp;</td>
    </tr>
    <tr>
      <td style="padding-bottom: 0; padding-top: 0; padding-left:40px;" colspan="4">
        <!--            <hr/>-->
      </td>
    </tr>
    <tr>
      <td style="padding-bottom: 0; padding-top: 0; padding-left:40px;"><small>July,2020</small></td>
      <td colspan="3" style="padding-bottom: 0; padding-top: 0;">
        <!--            <small style="white-space: nowrap">LankaBangla e-Learning Academy</small>-->
      </td>
    </tr>
    <tr>
      <td colspan="4" style="padding: 0;">
        <img style="width: 100%; display: block;" src="https://i.imgur.com/TNICjPS.png" alt="">
      </td>
    </tr>
  </table>

</body>

</html>

效果说明 #

修改后底部图片会完全贴合外层表格的宽度，消除了原代码中因全局cellpadding、cellspacing以及嵌套表格带来的宽度限制，和参考证书的视觉效果一致。

内容的提问来源于stack exchange，提问作者Momin