html - Razor 视图和 asp.net mvc 3 中的样式表

Question

我在我的视图中渲染了四个表。其中三个表是局部视图。观点是这样的：

@using (Html.BeginForm())
{
  <div id="drawForm">  
    @Html.Partial("_PartialHeader")
    @Html.Partial("_PartialDrawing")
    <table border="1">
    @for (int i = 0; i < 4; i++)
        { 
            <tr>
                <td>@(i+1)</td>
                @Html.Partial("_PartialDropDown")
            </tr>
        }
    </table>
    @Html.Partial("_PartialFooter")
  </div>
    <button type="submit">Save</button>
}

这是_PartialHeader视图：

<table border="1">
    <tr>
        <td>
            Logo drawing here
        </td>
    </tr>
</table>

这是_PartialDrawing：

<table border="1">
    <tr>
        <td>
            <img src="@Url.Content("~/Content/MachineDrawing.png")" alt="Logo" />
        </td>
    </tr>
</table>

和_PartialFooter：

<table border="1" >
    <tr>
        <td>
            First sign
        </td>
        <td>
            Sexond sign  
        </td>
    </tr>
</table>

只有_PartialDropDown不是表本身。它看起来像这样：

<td>
    Type 1
</td>
<td>
    <select name="YesNoNotApplicable">
        <option>Yes</option>
        <option>No</option>
        <option>Not Applicable</option>
    </select>
</td>
<td>
    Edit field if No is chosen
</td>

所以基本上当我上下滚动时，在 mozila 中发生的事情是Scroll Up ：

当我在这里Scroll down：

一些边界消失，另一些出现。我在IE8中测试过，没有遇到这个问题。我正在使用的 CSS 是这样的：

table {
    border-collapse: collapse;
    width: 686px;
    margin: 0px 1px 20px 1px;
}
td {
   height: 55px;
}

并且所有表格都呈现在附有此 CSS 的 div 标签内：

#drawForm 
{
    margin: 0 auto;
    width: 690px;
    height: 800px;
    padding-top: 2px;   

}

那么为什么以及如何解决这个问题呢？

Answer 1

所以我找到了两种应该根据情况起作用的方法。我认为更优雅的方式是我在某个论坛上阅读的解决方案。这是说添加<thead>和to the tables fix this issue. Other people were confirming that this solution works, however in my case it did not so instead I styled my table with边框间距：0px;`。这是某种解决方法，但如果没有其他方法，结果是可以接受的。