table-row not 100% of table container (fieldset)

Question

Why is the .item element which acts as a table-tow won't be 100% width
of it's parent table-acting element?

Demo page: http://jsbin.com/AdaCUYu/8/edit

HTML

  <form>
    <fieldset>
      <div class="item">
        <label>First Name</label>
        <input />
      </div>
      <div class="item">
        <label>Last Name</label>
        <input />
      </div>
    </fieldset>
  </form>

CSS

fieldset{ 
  border:0;
  padding:0;
  margin:0;
  display:table;
  width:100%;
  border-spacing:10px;
}

.item{ display:table-row; }
  .item > *{ display:table-cell; padding:5px; }
  .item input{ width:100%; }

not it's not the case. yes you can make it, I've done that for years. — vsync, Sep 03 '13 at 09:01

score 1 · Accepted Answer · answered Sep 03 '13 at 09:06

1

ok, found the problem. Seems like a fieldset element will not work as a table-displayed element.
How strange.

answered Sep 03 '13 at 09:06

vsync

118,978
58
307
400

table-row not 100% of table container (fieldset)

HTML

CSS

1 Answers1