我需要构建一个基于网络的电视指南列表。
刚开始时,我认为我只需要构建一个表格,因为它是表格数据。
date 00:00 00:30 01:00 etc...
channel 1 show 1 show 2 show 3 etc...
channel 2 show 3 show 4 show 5 etc...
但遗憾的是,情况并非如此。
而 <th>
每 30 分钟一次。节目长度可以是 5 分钟。最多几个小时。
我可以作弊并使每个<th>
colspan=6 所以子单元将是 5 分钟。然后将每个节目的 colspan 设置为时间长度/5(分钟),这就是我的 colspan。
但是(总有一个但是),现在我拥有的不是带有表格数据的表格,而是某种意大利面条表格。
我该怎么办?
这绝对不是你应该用
解决的问题。
使用多个
,每个都在 CSS 中设置了 display inline 或 inline-block 集。设置它们的宽度,最好使用 CSS 类来完成,例如如下:
div.channel div
{
display: inline-block;
}
div.five { width: 1em; }
div.ten { width: 2em; }
div.fifteen { width: 3em; }
...
然后是 HTML:
<div class="channel">
<div class="five">Five minute program</div>
<div class="fifteen">Fifteen minute program</div>
<div class="five">Five minute program</div>
</div>
<div class="channel">
<div class="ten">Ten minute program</div>
<div class="fifteen">Fifteen minute program</div>
</div>