無法修復HTML表格中的單元格寬度

Question

我原以爲下面的CSS會起作用;

table#ScheduledLeaveCalendar 
{ 
table-layout:fixed; 
} 

/* Calendar that shows annual leave */ 
#ScheduledLeaveCalendar 
{ 
    border-collapse:collapse; 
} 
#ScheduledLeaveCalendar td, #ScheduledLeaveCalendar th 
{ 
    font-size:0.8em; 
    border:1px solid #2906A6; /* dark blue */ 
    padding:3px 3px 2px 3px; 
    width:30px; 
} 
#ScheduledLeaveCalendar th 
{ 
    font-size:0.9em; 
    text-align:center; 
    padding-top:5px; 
    padding-bottom:4px; 
    background-color:#6640EE; /* blue */ 
    color:#ffffff; 
} 

這個html對於MVC開發者來說是有意義的;

<table id="ScheduledLeaveCalendar"> 
    <%: Html.DisplayFor(x => x.cvm.Header1)%> 
    <%: Html.DisplayFor(x => x.cvm.Header2)%> 
    <%: Html.DisplayFor(x => x.cvm.Header3)%> 
    <%: Html.DisplayFor(x => x.cvm.Lines)%> 
</table> 

但是由於某些原因，它沒有。它似乎忽略了固定的屬性 - 我正在使用IE8。 有這個問題的測試包裝或滾動條沒有問題。

這是呈現的HTML，經過編輯以刪除重複的代碼;

<table id="ScheduledLeaveCalendar"> 
<tr> 
     <th colspan="2"></th> 
     <th colspan="6">Apr 2011</th> 
     <th colspan="6">Apr 2011</th> 
     <th colspan="6">Apr 2011</th> 
     <th colspan="6">Apr 2011</th> 
     <th colspan="6">May 2011</th> 
     <th colspan="6">May 2011</th> 
     <th colspan="6">May 2011</th> 
     <th colspan="6">May 2011</th> 
     <th colspan="6">May/Jun 2011</th> 
</tr> 
    <tr id="CalendarHeader2Row"> 
      <th> 
       F 
      </th> 

      <th> 

      </th> 

      <th> 
       M 
      </th> 

      <th> 
       T 
      </th> 

      <th> 
       W 
      </th> 

      <th> 
       T 
      </th> 

      <th> 
       F 
      </th> 

      <th> 

</tr> 
    <tr id="CalendarHeader3Row> 


      <th> 
       1 
      </th> 

      <th> 

      </th> 

      <th> 
       4 
      </th> 

      <th> 
       5 
      </th> 

      <th> 
       6 
      </th> 

      <th> 
       7 
      </th> 

      <th> 
       8 
      </th> 


</tr> 
<tr id="CalendarLines"> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight DefaultColour"></td> 
    <td class="StandardCellHeight BankHolidayColour"></td 
</tr> 
</table> 

這是什麼被渲染，單元格有不同的寬度;

Answer 1

我試圖重新創建您所看到的問題，請參閱下面鏈接的圖像。

http://i.imgur.com/Vdqc0.jpg

該圖像顯示在IE8模式，所使用的HTML和CSS表。細胞似乎是固定的。但我不確定這是什麼，你問

也看看這篇文章http://www.w3schools.com/cssref/pr_tab_table-layout.asp這需要html頁面有一個DOCTYPE固定佈局在IE8中工作。