html - 如何将单元格内的 iframe 元素与 html 表格内的其他单元格对齐。?

标签 html css iframe html-table

我如何将表格单元格内的 iframe 元素与表格内的其余表格单元格对齐,以便它以相同的方式显示(如果它是 td 元素)。 ?

我尝试通过添加内联样式 position:relative 来对齐; top:-4px 到 iframe 元素。

<iframe src="Static/Pan.htm" frameborder="0" scrolling="no" width="190" height="30" style="width: 190px;height: 30px; display:table-cell; position:relative; top:-4px"></iframe>

我不认为这是正确的方法。是否有其他对齐方式?

主 HTML

<table id="mytable">
  <tr>
    <td>Name
    </td>

    <td>Phone Number
    </td>

    <td>Address
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="text" />
    </td>
    <td>
      <iframe src="Address.htm" frameborder="0" scrolling="no" width="190" height="30" style="width: 190px;height: 30px; display:table-cell;"></iframe>

    </td>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="button" value="update" />
    </td>
  </tr>
</table>

Iframe 地址.htm

<html>

<body>
  <div>
    <input type="text" />
  </div>
</body>

</html>

这是实际输出: Actual Output

这是预期的输出: Expected output

最佳答案

像这样定位所需的单元格:

td {
    vertical-align: top;
}

这会将单元格的内容与单元格的顶部对齐。

关于html - 如何将单元格内的 iframe 元素与 html 表格内的其他单元格对齐。?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32580930/

相关文章:

html - 负 z-index 有副作用吗

css - 如何让div左对齐?

javascript - 如何调用另一个网页上的js函数?

javascript - 小书签弹出窗口 : generate divs via JS, 或 iframe?

javascript - WebSQL :table not creating on changing window. 位置

javascript - 显示增减金额的合计值

javascript - [HTML][Javascript][Canvas] 无法使多边形函数工作

javascript - Iframe 中的 SCORM 类(class)找不到 API

javascript - 如何使用 node.js 将 html 的值表添加到 mysql

html - TD :first-child does not seem to work in IE