html - 读取 : Line up object outside a table with column inside a table

Question

在较宽的屏幕宽度下，我在 img 标签上使用 float:left 将图像放在表格的左侧。 HTML 看起来像这样:

<div>
<img>
<table>
<tr><th>This</th><td>Some fairly long content</td></tr>
<tr><th>And the other</th><td>Some fairly long content</td></tr>
</table>
</div>

但是在较窄的屏幕宽度下，我希望图像位于信息表的顶部，而不是旁边。我通过媒体查询删除 float ，然后使用 margin:auto 将其居中。所以我的 CSS 是这样的:

img {float:left;width:320px;height:240px;padding:1rem;}
@media (max-width: 630px) {
  img {margin:auto;float:none;padding:0;}
  }

这可行，但我的问题是让图像居中(或左对齐或右对齐)看起来是错误的。我意识到我想要的是图像的左侧与第二个表格列的左侧对齐。

这让我难住了。我需要一个适用于 IE8 的解决方案。左列宽度不固定(撰稿人可以随时更改行标签)。

Answer 1

(这是我寻求的折衷方案；也许我真正想做的事情是不可能的？)

我在表格的第一列放了一个 width。例如

th {width:5rem;}

然后在图像上填充:

img {padding: 0 0 0 5rem;}

不太理想，因为我不想控制该列的宽度...但唯一的缺点是，如果稍后有人在第一列中放置一个长字符串，他们的字符串将自动换行(这甚至可能是最好的).