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>

这是正在渲染的，细胞具有不同的宽度; enter image description here

Answer 1

我尝试重新创建您遇到的问题，请参阅下面链接的图片。

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

图像显示IE8模式下的表格，使用的是html和css。细胞似乎是固定的。但我不确定那是不是你要问的是什么

另请参阅本文http://www.w3schools.com/cssref/pr_tab_table-layout.asp，该文章要求html页面具有DOCTYPE，以便在IE8中使用固定布局。

无法修复HTML表格中的单元格宽度

1 个答案: