Parent tables with width=100% are collapsed to their inner element's size after changing the child element style

Issue #14978991 • Assigned to bbrinza

Details

Author
DevExpress T.
Created
Dec 6, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
41.16299
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

There are three nested HTML tables and a div element next to the inner table:

<input type="button" value="button" id="button">
<table class="outer">
    <tbody>
      <tr>
        <td>
          <table class="middle">
            <tbody>
              <tr>
                <td>
                  <div>
                    <table class="inner">
                      <tbody>
                        <tr>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tbody>
                    </table>
                    <div id="siblingDiv"></div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

and the following CSS styles

.outer {
  table-layout: fixed;
}
.middle {
  width: 50%;
  background-color: green;
}
.inner td {
  height: 30px;
}
.inner {
  width: 100%;
  table-layout: fixed;
  position: relative;
}
#siblingDiv {
  background-color: red;
}

If we change the inner div height:

var button = document.getElementById("button");
var siblingDiv = document.getElementById("siblingDiv");
var height = 0;
button.addEventListener("click", function() {
  height += 5;
  siblingDiv.style.height = height + "px";
});

the parent tables width is also changed. This is incorrect, the parent tables width should stay the same. I have attached a video illustrating it. You can also test it in action on codepen.

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “bbrinza”

You need to sign in to your Microsoft account to add a comment.

Sign in