在没有绝对定位的情况下将标题图像对齐到表格的左侧?

时间:2010-08-20 07:27:07

标签: html css

我将html导出为pdf,并使用表格的thead和tfoot属性在我的pdf输出中创建页眉和页脚。它工作得很好,除了我需要在每个页面的左上角有一个图像。使用position:absolute作为图像上的标签在html中工作,但遗憾的是第三方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>

1 个答案:

答案 0 :(得分:0)

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

<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>