是否有可能使每行中具有不同数字列和列宽的CSS3表?

时间:2012-07-23 10:39:38

标签: html5 css3

是否可以使用CSS3表使其看起来像这样

 +---A---+---B---+---C---+---D---+---E---+
 >>>>+---A---+---B---+---C---+---D---+<<<<  ---> case 1
 +---A---+---B---+---C---+---D---+---E---+

案例1:需要保留第一个单元格吗?是自动保证金的任何代码

 +---A---+---B---+---C---+---D---+---E---+
 +-----A-----+-------B-------+---C---+-D-+  ---> case 2
案例2:colspan工作的单元格宽度是一样的。如果单元宽度变化怎么办?有可能吗?

所有这些代码必须只在CSS3和HTML5中。暂不使用<table><tr><td> <div>

我应该转换为使用网格而不是使用表吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

如果是表格数据,请使用表格,如果不是表格数据则使用。

从列宽不匹配的示例中,以及colspans不能执行您想要的操作时,很难看出数据如何成为表格数据。

如果以正确的方式执行,可以使用几个选项,colspan。例如,在普通单跨距单元格上设置2的colspan将允许您将其他单元格跨越到另一列的中间。

或者,如果它确实不是表格数据,那么使用DIV并将它们定位为apropriatley。

使用表格,您将无法改变一行单元格的宽度而不会影响所有其他行单元格的宽度,我甚至不确定您是否可以在绘制完表格后动态更改colspan,从未尝试过说实话。)

老实说,我怀疑你真的想用DIV来解决这个问题,因为你的数据似乎并不适合表格数据模型。 Tbular数据通常在列上具有标题,其数据对应于相应列中的那些列标题。您的单元格似乎能够自由移动,因此不会在任何特定的列标题下修复。

我从布局中猜到你可能会创建某种日历?和事件可以跨越列的任何时间跨度等?在这种情况下,我个人更喜欢div,虽然我知道有些人更喜欢使用表格。