首页 / 技术问答 / Html问答列表 / 问答详情

图像如何能达到 HTML 表格的全宽

Here is JPEG File for Certificate, and I implement it for the backend developers in HTML table format enter image description here

我试着弄清楚底部图像部分的全宽，但我无法实现上面的图像！

<!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; padding: 40px 40px 0 40px; font-family: Arial, Helvetica, sans-serif;" cellpadding="10" cellspacing="10">
    <tr>
      <td align="left">
        <img width="200px" src="https://i.imgur.com/7zzr0JS.png" alt="lanka-bangla">
      </td>
      <td colspan="3" align="right">
        <div>
          <img width="220" src="https://i.imgur.com/7hx10YB.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <div>
          <img width="130" src="https://i.imgur.com/o5kcDS3.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td colspan="3" style="padding-bottom: 0; padding-top: 0">
        <!--            <hr/>-->
      </td>
    </tr>
    <tr>

      <td style="padding-bottom: 0; padding-top: 0"><small>July,2020</small></td>
      <td colspan="2">
        <!--            <small style="white-space: nowrap">LankaBangla e-Learning Academy</small>-->
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <table width="100%">
          <tr>
            <td><img width="100%" src="https://i.imgur.com/TNICjPS.png" alt=""></td>
          </tr>
        </table>
      </td>
    </tr>


  </table>

</body>

</html>

推荐答案

我认为你可以通过将图像更改为positioned element并确保它相对于桌子的位置来解决这个问题.

将表的position css属性设置为relative

<table style="position: relative;">
<!-- table content goes here -->
</table>

将position css属性设置为absolute，并将图像上的left和bottom属性设置为0:

<img 
  style="position: absolute; left: 0; bottom: 0;" 
  width="100%" 
  src="https://i.imgur.com/TNICjPS.png" 
  alt=""
>

我更新了您的代码片段，以显示这是如何工作的.

希望这个能帮上忙！

<!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="position: relative; width:794px;height: 800px;margin:1.5% auto;background-color: #ffffff;border:1px solid #ededed; padding: 40px 40px 0 40px; font-family: Arial, Helvetica, sans-serif;" cellpadding="10" cellspacing="10">
    <tr>
      <td align="left">
        <img width="200px" src="https://i.imgur.com/7zzr0JS.png" alt="lanka-bangla">
      </td>
      <td colspan="3" align="right">
        <div>
          <img width="220" src="https://i.imgur.com/7hx10YB.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <div>
          <img width="130" src="https://i.imgur.com/o5kcDS3.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td colspan="3" style="padding-bottom: 0; padding-top: 0">
        <!--            <hr/>-->
      </td>
    </tr>
    <tr>

      <td style="padding-bottom: 0; padding-top: 0"><small>July,2020</small></td>
      <td colspan="2">
        <!--            <small style="white-space: nowrap">LankaBangla e-Learning Academy</small>-->
      </td>
    </tr>
    <tr>
      <td colspan="4">
        <img style="position: absolute; left: 0; bottom: 0;" width="100%" src="https://i.imgur.com/TNICjPS.png" alt="">
      </td>
    </tr>
  </table>

</body>

</html>

编辑:添加了一个应该对邮箱友好的版本.这将使用定位元素替换为将表和img包装为sibling 元素的div，并使用一些粗俗的负边距来使其看起来像您想要的那样.

<!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">
  <div style="width:794px; margin:1.5% auto; background-color: #ffffff; border:1px solid #ededed;">
  <table style="width:794px;height: 800px;padding: 40px 40px 0 40px; font-family: Arial, Helvetica, sans-serif;" cellpadding="10" cellspacing="10">
    <tr>
      <td align="left">
        <img width="200px" src="https://i.imgur.com/7zzr0JS.png" alt="lanka-bangla">
      </td>
      <td colspan="3" align="right">
        <div>
          <img width="220" src="https://i.imgur.com/7hx10YB.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <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></td>
    </tr>

    <tr>
      <td>
        <div>
          <img width="130" src="https://i.imgur.com/o5kcDS3.png" alt="lanka-bangla">
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td colspan="3" style="padding-bottom: 0; padding-top: 0">
        <!--            <hr/>-->
      </td>
    </tr>
    <tr>

      <td style="padding-bottom: 0; padding-top: 0"><small>July,2020</small></td>
      <td colspan="2">
        <!--            <small style="white-space: nowrap">LankaBangla e-Learning Academy</small>-->
      </td>
    </tr>
  </table>
  <img style="margin-top: -4rem; margin-bottom: -1rem" width="100%" src="https://i.imgur.com/TNICjPS.png" alt="">
  </div>
</body>

</html>

Html相关问答推荐

react ：事件和转发器在特定代码段中不起作用

在Chrome中使用手写笔时，滚动条方向反转

如何收集<；p&>元素下的<；p>；子元素

HTML中的ARIA标签：在元素内部还是外部？(&Q；

如何设计缠绕锚点元素的样式？

rmarkdown HTML数字不适用于针织衫_1.44

网格布局中的组件

MUI 日期 Select 器要包含的日期

为什么我的网页显示网格区域彼此相邻，而不是我设置它们的方式？

我正在使用 NVDA 并多次读取关闭按钮，但它的读取非常完美

具有 css 高度的输入元素：100% 溢出父 div

如何使我的设计适合与我的框架尺寸不同的视口？

a with