表中的可变宽度列

时间:2010-05-26 09:16:13

标签: php javascript html css layout

我正在使用HTML表作为日历,我想用我的数据库中的各种事件填充单元格。通常他们会在周末降落,但有些人会在长周末,银行假日甚至是奇怪的一周工作。

如何让我的表格列相应地展开和缩小。如果可能的话,我想避免使用javascript。

如果无法做到这一点,我将需要一个教程来帮助我了解如何使div的定位行为。

欢呼声

编辑一些说明: 想象它像5列, col 1-3,5 = 30px col 4 = 250px

但是我不能总是知道在php绘制表格之前应该是多少宽度。因为事件可以是任何一天(列)。

最终编辑: 看起来我用我的CSS太努力了。 http://www.freeimagehosting.net/uploads/c900b5c77b.png

我得到了一个结果我很高兴遵循下面的建议并删除我的宽度声明并将单元格更改为max-width。可能会有以后使兼容兼容的所有乐趣:(

这是我参加过的Css。 td.calendar-day-np是从本月开始/结束时排除的天数。

/* calendar */ 
table.calendar{width:100%;border-left:1px solid #999;}
tr.calendar-row{}
td.calendar-day{min-height:80px;position:relative;}* html div.calendar-day{height:80px;}
td.calendar-day:hover{background:#F9F9FA;}
td.calendar-day-np{background:#F9F9FA;min-height:80px;}* html div.calendar-day-np{height:80px;}
td.calendar-day-head{text-align:center;padding:5px;font-weight:bold;background:#ccc;border-bottom:1px solid #999;border-top:1px solid #999;border-right:1px solid #999;}
div.day-number{background:#ccc;padding:5px;color:#fff;font-weight:bold;float:right;margin:-5px -5px 0 0;width:20px;text-align:center;}
/* shared */ 
td.calendar-day,td.calendar-day-np{max-width:200px;padding:5px;border-bottom:1px solid #999;border-right:1px solid #999;}

2 个答案:

答案 0 :(得分:1)

您在寻找colspan吗?

答案 1 :(得分:1)

如果你在css文件或内联css或div标签中指定最小宽度和最小高度(不良做法),那么你的柱子和行将具有最小宽度和高度,但可以根据需要扩展

如果以这种方式尝试,结果如何? 您是否可以为整个表格指定宽度?如果是,那么必须以某种方式填补空间。也许这可以使其他柱子更宽,然后需要。 (如果我错了,有人会纠正我)。也许你可以尝试让一个单元格的内容真的很长,看看会发生什么。