表列不保持相同的寬度

我正在使用表和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

表列不保持相同的寬度

回答

相關問題