Zoltán Tamási Zoltán Tamási - 3 months ago 8
CSS Question

Sizing issue of table-cell elements, why?

I'm trying to arrange an input-group. I'm using bootstrap, but the issue is (fortunately) reproducible in pure HTML/CSS as well.

I have a 100% width

display: table
container, and I'm trying to put a
16.666%
width
span
, and a
83.3333%
width
input
into it. But due to the strangest magic I'm ever seen, they don't fill the entire space. When inspecting the elements, I can see that the
span
width is calculated correctly, but the
input
width is far less than it should be, hence it doesn't fill the space that it should.

However, if I put two
input
elements (so an
input
instead of the
span
, it works as expected.

Please check out this DEMO fiddle

I've reproduced the issue in Chrome latest, and IE11 too, so I guess it's not a specific browser bug.

I'd like to know what's happening, and how to achieve my goal if not like this.

Answer

I would not use input as table-cell. Use something else instead and then set input to width 100% so it will fill the container.

Also added table-row:

<div class="w6">
  <div style="display: table; background-color: brown;">
    <div style="display: table-row" class="w12">
      <span class="w2" style="display: table-cell; background-color: blue;"></span>
      <!--<input type="text" class="w2"/>-->
      <span class="w10">
        <input type="text" />
      </span>
    </div>
  </div>
</div>

https://jsfiddle.net/p4q40j22/1/