Theo như tôi biết thì không có colspan trong css, nhưng sẽ có column-span
bố cục nhiều cột trong tương lai gần, nhưng vì nó chỉ là bản nháp trong CSS3, nên bạn có thể kiểm tra nó ở đây . Dù sao, bạn có thể thực hiện một cách giải quyết bằng cách sử dụng div
và span
với màn hình giống như bảng.
Đây sẽ là 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>
Và đây sẽ là 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%; }
Lý do duy nhất để sử dụng thủ thuật này là để đạt được lợi ích của table-layout
hành vi, tôi sử dụng nó rất nhiều nếu chỉ đặt div và độ rộng khoảng cho tỷ lệ nhất định không đáp ứng đầy đủ yêu cầu thiết kế của chúng tôi.
Nhưng nếu bạn không cần phải hưởng lợi từ table-layout
hành vi đó, thì câu trả lời của durilai sẽ phù hợp với bạn.