将包含视频的单元格设置为自动缩小以适应

Question

我希望我的页面布局如下所示：

Heading        | video
text text text | video


video | Heading
video | text text text

Heading        | video
text text text | video

视频大小相同，不应占据桌面行的一半。然而，天真地使用<table>，细胞在中间均匀分开：

如何让包含视频的单元格缩小，以使文本尽可能宽？并不是说这意味着列分隔符不会在行之间对齐，尽管它们应该在每两行之间对齐。同样，视频大小相同。如果这是一个n00b问题我很抱歉，我没有网络开发经验。这是我使用的代码：

    <table cellspacing="50">
      <tr>
        <td valign="top"  >
          <h2>Heading 1</h2>
          <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </td>
        <td>
          <video autoplay loop>
            <source src="video/video1.mp4" type="video/mp4">
          </video>
        </td>
      </tr>
            <tr>
        <td>
          <video autoplay loop>
            <source src="video/video2.mp4" type="video/mp4">
          </video>
        </td>        
        <td>
          <h2>Heading 2</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </td>

      </tr>
    </table>

Answer 1

事实证明，使用colspan属性可以轻松地使单元格跨越列。所以我刚刚在文本单元格中添加了colspan="2"，然后在底部添加了以下行：

    <tr>
      <td width="25%"></td>
      <td width="50%"></td>
      <td width="25%"></td>
    </tr>

因此视频的宽度始终为25%，文字宽度始终为75%。