IE11 shows every { display: table-cell } element at a new line

Question

I have the following HTML (JSFiddle):

<div class="form-group tabled-contents">
    <div style="display: table-row;">
        <input id="BodyContentPlaceholder_TxtCustomerId" type="text">
        <input id="BodyContentPlaceholder_BtnShowByCustomerId" type="submit" value="Show">
    </div>
</div>

And the following CSS:

.tabled-contents {
    display: table;
    width: 100%;
}

.form-group input[type=text], .form-group input[type=submit] {
    display: table-cell;
    width: 200px;
}

It looks as expected in all browsers (Chrome, FF etc.): both inputs are on the same row.
But in IE11 the second input is rendered under the first one.

Does anybody know why it's so and how to make it to be shown in IE the same way as in the other browsers?

Don't give controls like `input` and `select` and stuff other display values. Just don't. Put them in `span`s or `div`s. — Mr Lister, Apr 20 '15 at 15:30

Alexander Abakumov · Accepted Answer · 2015-12-24T17:59:57.367

1

I submitted a bug report to the IE development team and it has been accepted as the issue.

I'll update this post upon changing the status of the bug.

edited Dec 24 '15 at 17:59

answered Sep 14 '15 at 22:34

Alexander Abakumov

10,817
10
71
111

score 0 · Answer 2 · answered Feb 24 '17 at 15:35

Workaround

add an empty div

<div style="width:0;display:table-cell"></div>

Example Codepen http://codepen.io/vinaymavi/pen/JWjxJb

<div style="display:table">
  <div style="width:0;display:table-cell"></div>
  <div style="display:table-cell;border:1px solid;">
   Cell-1
  </div>
  <div style="width:0;display:table-cell"></div>
  <div style="display:table-cell;border:1px solid;">
    Cell-2
  </div>
  <div style="width:0;display:table-cell"></div>
  <div style="display:table-cell;border:1px solid;">
    Cell-3
  </div>
</div>

For more info please check Microsoft bug https://connect.microsoft.com/IE/feedbackdetail/view/1263383/ie11-shows-every-html-input-element-with-display-table-cell-css-style-at-a-new-line#

score 0 · Answer 3 · answered Nov 17 '19 at 14:19

use the 'table' display property and the 'table-row' display property for the wrapping elements, but don't use the 'table-cell' property for the input element. just don't set the display property for those inline elements. and everything will work just fine, even in ie country :) p.s. - wrapping an input element with a div or other element contaminates the semantic structure, it should remain simple and true to meaning as much as possible.

IE11 shows every { display: table-cell } element at a new line

3 Answers3

Linked