html - 我无法在不破坏其他单元格对齐的情况下将图像放在表格中

Question

我正在尝试将图像放入我的表格中，但是当我放置 img 时<td> 之间的标签标签；相邻单元格的内容就像有 <br>标签在上面。

我尝试使用 display:inline-block但没有任何影响。

问题:我怎样才能让“邻居内容”熬夜？

<table height="100%" width="100%" border="solid black 1px">
  <tr class="Content">
    <td class="left">
      <img src="sample.jpg" width="250px" />
    </td>
    <td>
      <table class="right">
        <tr>
          <td class="Title">
            <h2> Title of movie </h2>	
          </td>
        </tr>
        <tr class="description">
          <td>Description of movie</td>
        </tr>
        <tr class="Actors">
          <td>
            <h2> Actors of movie </h2>
          </td>
        </tr>
        <tr class="buttons">
          <td colspan="2">
            <p>Option buttons will be here.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这里是相对的 CSS 样式。

.content {
  background-color: white;
}
.content .left {
  vertical-align: text-top;
  width: 250px;
}
.content .right {
  vertical-align: text-top;
}

Answer 1

我希望，您想让右栏内容与顶部对齐(抱歉，我不太清楚...)
所以，试试这个:

<table height="100%" width="100%" border="solid black 1px">
  <tr class="Content">
    <td class="left">
      <img src="sample.jpg" width="250px" />
    </td>
    <td style="vertical-align: top"> <!-- Here is the "trick" -->
      <table class="right">
        <tr>
          <td class="Title">
            <h2> Title of movie </h2>	
          </td>
        </tr>
        <tr class="description">
          <td>Description of movie</td>
        </tr>
        <tr class="Actors">
          <td>
            <h2> Actors of movie </h2>
          </td>
        </tr>
        <tr class="buttons">
          <td colspan="2">
            <p>Option buttons will be here.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>