Question

我正在使用一张表格并排插入两个iframe。内容就是td，我想知道是否可以自定义宽度（即30％和70％）？看起来宽度是在中间分开的，例如，如果我使用width =“ 70％”，则iframe会在看起来是表数据一半的内部进行调整。

这不起作用：

    <table>
    <tr>
    <td width="30%"><iframe..... etx.></iframe></td>
    <td width="70%">iframe......etc.></iframe></td>
    </tr>
    </table>

Answer 1

首先，通常将table元素用于显示表格数据以外的其他用途（例如，布局目的）是不明智的做法，因此除非iframe元素实际上将包含表格数据，最好使用其他方法。另外，width属性在最新标准中已过时，因此您应该使用CSS来指定宽度。

关于您的问题，这是一个似乎可以在我的测试中使用的解决方案：

HTML：

<div id="div1">
  <div id="div2">
    <iframe id="iframe1"></iframe>
  </div>
  <div id="div3">
    <iframe id="iframe2"></iframe>
  </div>
</div>

CSS：

#div1 {
  display: table;
  width: 100%;
}

#div2, #div3 {
  display: table-cell;
}

#div2 {
  width: 30%;
}

#div3 {
  width: 70%;
}

iframe {
  width: 100%;
}

此解决方案使用table属性的table-cell和display值，而不是实际的table和td元素，以便HTML在语义上保持正确（也就是说，它准确地描述了内容。

为了完整性，我将补充一点，如果您实际上试图显示表格数据，则可以使用类似的CSS规则对实际的table和td元素实现相同的效果：

HTML：

<table>
  <tr>
    <td id="td1">
      <iframe></iframe>
    </td>
    <td id="td2">
      <iframe></iframe>
    </td>
  </tr>
</table>

CSS：

table {
  width: 100%;
}

#td1 {
  width: 30%;
}

#td2 {
  width: 70%;
}

iframe {
  width: 100%;
}

自定义表格数据宽度html

1 个答案: