0

I have the following form which is made not using the standard <table> tag but with CSS table(display:table, display:table-row, display: table-cell). Till here no problem occurs but then I need some colspans in CSS which I am not able to apply. I used column-span but it didn't worked!

HTML:

<div id="form">
<br/><br/>
    <form id="form_container">
        <span class="row">
            <span class="cell"><select></select></span>
            <span class="cell"><input type="text" /></span>
        </span>
        <span class="row">
            <span class="cell"><input type="email" /></span>
        </span>
        <span class="row">
            <span class="cell"><select></select></span>
        </span>
        <span class="row">
            <span class="cell"><select></select></span>
        </span>
        <span class="row">
            <span class="cell"><select></select></span>
        </span>
        <span class="row">
            <span class="cell"><input type="text" /></span>
            <span class="cell"><select></select></span>
        </span>
        <span class="row">
        <span class="cell"><input type="checkbox" /><b>I have read the</b> <a>Terms & Conditions</a></span>
        </span>
        <input type="image" src="img/send_button.png" />
    </form>
</div>

CSS:

#form_container {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

input, select {
    padding: 5px;
    border-radius: 5px;
}

Fiddle.

I want the colspan on the rows which have only one cell. Is this possible with CSS or not?

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113

1 Answers1

1

Having div dressed up as a table smells wrong in the first place, I would avoid it. However, if your target are the modern browsers you could use :nth-child pseudo selector.

/* one item */
.cell:first-child:nth-last-child(1) {
     width: 100%;
}

/* two items */
.cell:first-child:nth-last-child(2) {
    width: 50%;
}

Does this fiddle looks like your expected result : http://jsfiddle.net/dZuAh/3/ ?

Tiberiu C.
  • 3,365
  • 1
  • 30
  • 38