CSS display-table + SPAN error

523 Views Asked by At

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>
3

There are 3 best solutions below

0
On BEST ANSWER

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/

1
On

You're wrapping table-row elements (<p> tags in this case) by <span>. You could change the type of display of <span> elements to table-row-group:

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

Here is the JSFiddle Demo

0
On

I would use a different structure like this: http://jsfiddle.net/7Kxf5/, with div or a ul list.

I don't think using span in this case would fit in a good practice.