Question

我目前正在开发一个网络应用，它使用<table>作为其布局设计。

以下是我的示例代码：

＆＃13;

function hideRow(link) {
  var row1 = document.getElementById("dataRow");
  var row2 = document.getElementById("toolbarRow");
  var row4 = document.getElementById("image");
  if (row1.style.display != "none" && row2.style.display != "none") {
    link.innerHTML = "Show";
    row1.style.display = "none";
    row2.style.display = "none";
  } else {
    link.innerHTML = "Hide";
    row1.style.display = "table-row";
    row2.style.display = "table-row";
  }
}

＆＃13;

<div style="width:1000px;height:300px">
  <table style="width:100%;height:100%">
    <tr>
      <td rowspan=4 style="height:100%;width:20%;background-color:red;vertical-align:top">
        <table>
        </table>
      </td>
      <td style="border:1px solid black;max-height:30px;width:40%;">A</td>
      <td style="border:1px solid black;max-height:30px;width:40%;">B<button style="display:inline-block;float:right;" onclick="hideRow(this)">Hide</button></td>
    </tr>
    <tr id="dataRow" style="display:table-row;">
      <td style="overflow:auto;width:40%;height:30%;position:relative;background-color:gray;">X</td>
      <td style="overflow:auto;width:40%;height:30%;position:relative;background-color:gray;">Y</td>
    </tr>
    <tr id="toolbarRow" style="display:table-row;">
      <td colspan=2 style="height:30px;background-color:green;"></td>
    </tr>
    <tr>
      <td id="image" colSpan=2 style="border:1px solid blue;height:100%;width:80%;position:relative;vertical-align:top"></td>
    </tr>
  </table>
</div>

＆＃13;

因此，点击Hide按钮后，grey block隐藏了green block和display:none。

在谷歌浏览器中，它可以像我预期的那样工作，但在IE Edge中，表格会缩小，而Block A和Block B会增长。

所以我的问题是：

为什么表在两种浏览器中的表现都不同？
我是否因为第一行的行数而打破了桌子？

隐藏表行时，包含rowspan的表会中断

0 个答案: