Html – Styling tables in a Razor view and asp.net mvc 3

asp.net-mvc-3csshtmlrazor

I am rendering four tables in my view. Three of the tables are Partial views. The view is this:

@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>
}

This is _PartialHeader view:

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

this is _PartialDrawing :

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

and the _PartialFooter :

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

Only the _PartialDropDown is not a table itself. It looks like this :

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

so basically what happens is in mozila when I scroll up and down I get this Scroll Up :

TableUp

And here when I Scroll down :

enter image description here

Some borders disappear other appears. I tested it in IE8 and I don't get this problem. The CSS which I'm using is this:

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

and all the tables are rendered inside a div tag which has this CSS attached :

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

}

So why and how can I fix this problem?

Best Solution

So I have found two ways that should work depending on the case. The more elegant way in my opinion is a solution that I read in some forum. It was saying that adding <thead> and 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 withborder-spacing: 0px;`. It's some sort of work around but the result is acceptable if nothing other works.