Насколько я знаю, в css нет colspan, но в ближайшем будущем будет column-span
для многостолбцовой разметки, но, поскольку это только черновик в CSS3, вы можете проверить его в здесь. . В любом случае вы можете сделать обходной путь, используя div
и span
с табличным дисплеем, подобным этому.
Это будет HTML:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
И это будет CSS:
/* this is to reproduce table-like structure
for the sake of table-less layout. */
.table { display:table; table-layout:fixed; width:100px; }
.row { display:table-row; height:10px; }
.cell { display:table-cell; }
/* this is where the colspan tricks works. */
span { width:100%; }
/* below is for visual recognition test purposes only. */
.red { background:red; }
.blue { background:blue; }
.green { background:green; }
.black { background:black; }
/* this is the benefit of using table display, it is able
to set the width of it's child object to fill the rest of
the parent width as in table */
.first { width: 20px; }
.last { width: 30px; }
.fill { width: 100%; }
Единственная причина для использования этого трюка состоит в том, чтобы получить преимущество от поведения table-layout
, я использую его много раз, если только установка div и span span на определенный процент не выполнила наши требования к дизайну.
Но если вам не нужно извлекать выгоду из поведения table-layout
, то ответ durilai вам вполне подойдет.