0

我有以下表格，它不是使用标准<table>标签而是使用 CSS table( display:table, display:table-row, display: table-cell) 制作的。直到这里没有问题发生，但是我需要一些我无法应用的 CSS 跨度。我用过column-span但是没用！

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;
}

小提琴。

我想要只有一个单元格的行上的 colspan。这对 CSS 是否可行？

4

1 回答 1

1

我一开始就打div扮成一个table臭名昭著的人，我会避免它。但是，如果您的目标是现代浏览器，您可以使用 :nth-child 伪选择器。

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

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

这个小提琴看起来像你预期的结果吗：http: //jsfiddle.net/dZuAh/3/？

于 2013-07-07T14:09:34.947 回答