html td设置在最右侧,html – 拆分td在两个

我试图拆分一个TD(表格单元格)看起来好像是两个单元格.问题是当细胞在高度上生长时,我不能使两个div在里面占据所有可用的高度.由于这些单元格可以动态生长,因此无法设置固定高度(可以解决问题).

这是我的代码：

JS Bin

article,aside,figure,footer,header,hgroup,menu,nav,section { display: block; }

td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0 }

#span1 { background-color: #DDD; width: 25px; float: right; }

#span2 { background-color: #EEE; width: 24px; float: left; }

.t { border-top: 1px solid black; }

.r { border-right: 1px solid black; height: 100%; }

1	2	3 1 1	4
1	2	3 3	4
1	2 2 2 2 2 22 2	3 3	4
1	2	3 3	4
1	2 2 2 2 2 2 2 2	3 3	4

这是它的外观：

我不想在第3列中看到这些空白.

任何想法如何解决？

到目前为止,我一直在和CSS打架一段时间没有运气…

谢谢！.

404_18@

你应该设置高度td height = 100％,而.span1设置height = 100％然后尝试这样可以得到答案..

JS Bin

article,section { display: block; }

td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0; height:100%; }

#span1 { background-color: #DDD; width: 25px; float: right; height:100%; }

#span2 { background-color: #EEE; width: 24px; float: left; }

.t { border-top: 1px solid black; }

.r { border-right: 1px solid black; height: 100%; }

1	2	3 1 1	4
1	2	3 3	4
1	2 2 2 2 2 22 2	3 3	4
1	2	3 3	4
1	2 2 2 2 2 2 2 2	3 3	4