html - 在没有绝对定位的情况下将标题图像左对齐？

Question

我正在将 html 导出为 pdf 并使用表格的 thead 和 tfoot 属性在我的 pdf 输出中创建页眉和页脚。它工作得很好，除了我需要在每页的左上角都有一个图像。使用 position:absolute 作为图像上的标签在 html 中有效，但不幸的是被第 3 方 pdf 导出器忽略。这会将我所有的文字向下推到图像的高度，而不是很好地坐在图像旁边。有什么办法可以在 css 中使用其他方法吗？以下是部分代码:

<table>
   <thead>
      <tr>
         <td><img src="mypic.jpg" style="height:150px; width:50px;" alt="pic" /></td>
         <td>&nbsp;</td>
      <tr>
   </thead>
   <tfoot>
      <tr>
         <td colspan="2" style="border-bottom-style:solid; padding-top:10px">blah blah blah</td>
         <td colspan="2" align="right">todays date</td>
      </tr>
   </tfoot>
   <colgroup><col width="50px" /><col width="500px" /></colgroup>
   <tbody>
      <tr>
         <td>&nbsp;</td>
         <td>
             ....my real content...
         </td>
      </tr>
   </tbody>
</table>

Answer 1

试试这个 -
这里重要的是在图像标签上左对齐，图像被移动到内容行中。

<table>
    <tfoot>
        <tr>
            <td colspan="2" style="border-bottom-style: solid; padding-top: 10px;">
                blah blah blah
            </td>
            <td colspan="2" align="right">
                todays date
            </td>
        </tr>
    </tfoot>
    <colgroup>
        <col width="50px">
        <col width="500px">
    </colgroup>
    <tbody>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                <div>
                    <img src="mypic.jpg" style="height: 150px; width: 50px;" alt="pic" align="left"><p>
                        this is some contentthis is some contentthis is some contentthis is some contentthis
                        is some contentthis is some contentthis is some contentthis is some contentthis
                        is some content this is some contentthis is some contentthis is some contentthis
                        is some contentthis is some contentthis is some contentthis is some contentthis
                        is some contentthis is some content this is some contentthis is some contentthis
                        is some contentthis is some contentthis is some contentthis is some contentthis
                        is some contentthis is some contentthis is some content this is some contentthis
                        is some contentthis is some contentthis is some contentthis is some contentthis
                        is some contentthis is some contentthis is some contentthis is some content this
                        is some contentthis is some contentthis is some contentthis is some contentthis
                        is some contentthis is some contentthis is some content</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>