Search code examples
htmlcssalignmentfieldset

CSS display-table + SPAN error

I have this example: Fiddle link

A table using display: table, display: table-cell, display: table-row

I need add before <p> a <span> tag, but my table structure breaks.

Any idea? Thanks

Example:

<fieldset>
<span>
<p>
    <label>First Name: </label>
    <input type="text" />
</p>
</span>
<span>
<p>
    <label>Second Name: </label>
    <input type="text" />
</p>
</span>
<span>
<p>
    <label>Country: </label>
    <select>
        <option>Choose</option>
    </select>
</p>
</span>
<span>
<p>
    <label>Age: </label>
    <select>
        <option>Choose</option>
    </select>
</p>
</span>
</fieldset>
Solution

  • If you are going to display as a table then all elements should follow the same structural property's

    fieldset span {
    display: table-row-group;
}

    Fiddle: http://jsfiddle.net/qQ3xJ/