表列不保持相同的宽度

我正在使用表和div的日历。这些列不会保留我在CSS文件中设置的宽度。他们应该都是20px;他们在宽度的行被设置为100％，表宽度被设置为100％。容纳所有宽度的Div被设置为1100px并且溢出设置为自动。表列不保持相同的宽度

列宽仍然尝试更改以适合该行。我如何设置它，使行中的所有列都是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建立，有一个日期号码和结尾，它只是没有得到来自龙门飞复制粘贴）。

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); 

      }

来源

2011-02-14 dotNet Zombie

所有列宽度之和任何给定的行必须等于父表的宽度。 – 2011-02-14 18:27:30

请发布一些标记 - 我试图在精神上呈现你的描述，但它失败了。 – Humberto 2011-02-14 18:28:00

我知道，我想要这样做，表格的宽度将会改变，以适应所有列与他们给定的宽度。我的表格和行的宽度都设置为自动和100％。 – 2011-02-14 18:35:10

感谢大家的帮助，我只是把一个div元素列内所设定的大小和工作

来源

2011-02-16 00:29:24

-1

AFAIK，你不能真正强制表列获得固定的宽度，一个办法是换表单元格内容有overflow: hidden固定宽度的块元素，你会得到你的宽度，但一些内容可能会被隐藏。

来源

2011-02-14 18:26:26

请不要设置表格和行的大小。列将设置表格的宽度。

编辑：尝试在您的表的顶部。

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

添加下面的类你的CSS和你的表项崩溃细胞之间的边界。

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

来源

2011-02-14 18:26:33 BillThor

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

来源

2011-02-14 18:30:25

表列不保持相同的宽度

回答

相关问题