Question

我正在使用表和div工作日历。列不是我在CSS文件中设置的宽度。它们都应该是20pxs;它们的宽度行设置为100％，表格宽度设置为100％。保存所有宽度的Div设置为1100px并且溢出设置为auto。

列宽仍然会尝试更改以适合行。如何设置它以使行中的所有列都是20px宽。

列的CSS代码。

.WeekDay
{
    text-align:center;
    background-color:transparent;
    width:20px;
    height:27px;
    border-color:Black;
    border-width:thin;
    border-style:solid;
}

.WeekendDay
{
    text-align:center;
    background-color:transparent;
    background-image:url(http://i1005.photobucket.com/albums/af175/zombieChan51/1px_transparency.png);
    background-repeat:repeat;
    width:20px;
    height:27px;
    border-color:Black;
    border-width:thin;
    border-style:solid;
}

表格代码（这是由JavaScript构建的，有一个日期编号，最后，它只是没有从Dragon Fly获得复制粘贴。）

table cellspacing="0px" style="width:100%;">
<col width="20px"/>
<tr class="DateRow">
<td id="January1DateColumn" class="WeekDay">
<td id="January2DateColumn" class="WeekendDay">
<td id="January3DateColumn" class="WeekendDay">
<td id="January4DateColumn" class="WeekDay">
<td id="January5DateColumn" class="WeekDay">
<td id="January6DateColumn" class="WeekDay">
<td id="January7DateColumn" class="WeekDay">
<td id="January8DateColumn" class="WeekDay">
<td id="January9DateColumn" class="WeekendDay">
<td id="January10DateColumn" class="WeekendDay">
<td id="January11DateColumn" class="WeekDay">
<td id="January12DateColumn" class="WeekDay">
<td id="January13DateColumn" class="WeekDay">
<td id="January14DateColumn" class="WeekDay">
<td id="January15DateColumn" class="WeekDay">
<td id="January16DateColumn" class="WeekendDay">
<td id="January17DateColumn" class="WeekendDay">
<td id="January18DateColumn" class="WeekDay">
<td id="January19DateColumn" class="WeekDay">
<td id="January20DateColumn" class="WeekDay">
<td id="January21DateColumn" class="WeekDay">
<td id="January22DateColumn" class="WeekDay">
<td id="January23DateColumn" class="WeekendDay">
<td id="January24DateColumn" class="WeekendDay">
<td id="January25DateColumn" class="WeekDay">
<td id="January26DateColumn" class="WeekDay">
<td id="January27DateColumn" class="WeekDay">
<td id="January28DateColumn" class="WeekDay">
<td id="January29DateColumn" class="WeekDay">
<td id="January30DateColumn" class="WeekendDay">
<td id="January31DateColumn" class="WeekendDay">
</tr>
</table>

截屏：http://i.stack.imgur.com/TXxPp.png

添加JavaScript代码段。

for (var dateNum in this.Months[monthNum].Days) {
                var Date = this.Months[monthNum].Days[dateNum];
                var NewDateColumn = document.createElement('td');
                NewDateColumn.id = Date.MonthName + Date.DayNum + "DateColumn";
                NewDateColumn.className = "MonthTd";
                NewDateColumn.innerText = Date.DayNum;
                if (Date.IsWeekend == true) {
                    NewDateColumn.className = "WeekendDay";
                }
                else if (Date.IsWeekend == false) {
                    NewDateColumn.className = "WeekDay";
                }

                DateRow.appendChild(NewDateColumn);

            }

Answer 1

尝试不设置表格和行的大小。然后列将设置表的宽度。

编辑：在表格顶部试试这个。

<table>
<tr class="DateRow">
<td id="January1DateColumn" class="WeekDay">x</td>

将以下类添加到CSS和表条目中以折叠单元格之间的边框。

.DateTable {
    border-collapse: collapse; // 'cellspacing' equivalent
}

Answer 2

确保“单元格”在一行中处于相同的高度。我不确定你有什么标记，但你的浮动div可能在不同高度时表现得很奇怪。

Answer 3

感谢大家的帮助，我只是将一个div元素放在列中，并设置了大小并且有效

Answer 4

AFAIK，你不能真正强制表格列获得固定的宽度，一种方法是将表格单元格内容包装在具有overflow: hidden的固定宽度的块元素中，你得到你的宽度但是一些内容可能会隐藏起来。

表格列不保持相同的宽度

4 个答案: