title: Styling tables in a Razor view and asp.net mvc 3
body: <p>I am rendering four tables in my view. Three of the tables are Partial views. The view is this:</p>
  
  <pre><code>@using (Html.BeginForm())
  {
    &lt;div id="drawForm"&gt;  
      @Html.Partial("_PartialHeader")
      @Html.Partial("_PartialDrawing")
      &lt;table border="1"&gt;
      @for (int i = 0; i &lt; 4; i++)
          { 
              &lt;tr&gt;
                  &lt;td&gt;@(i+1)&lt;/td&gt;
                  @Html.Partial("_PartialDropDown")
              &lt;/tr&gt;
          }
      &lt;/table&gt;
      @Html.Partial("_PartialFooter")
    &lt;/div&gt;
      &lt;button type="submit"&gt;Save&lt;/button&gt;
  }
  </code></pre>
  
  <p>This is <code>_PartialHeader</code> view:</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Logo drawing here
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>this is <code>_PartialDrawing</code> :</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img src="@Url.Content("~/Content/MachineDrawing.png")" alt="Logo" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and the <code>_PartialFooter</code> :</p>
  
  <pre><code>&lt;table border="1" &gt;
      &lt;tr&gt;
          &lt;td&gt;
              First sign
          &lt;/td&gt;
          &lt;td&gt;
              Sexond sign  
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Only the <code>_PartialDropDown</code> is not a table itself. It looks like this :</p>
  
  <pre><code>&lt;td&gt;
      Type 1
  &lt;/td&gt;
  &lt;td&gt;
      &lt;select name="YesNoNotApplicable"&gt;
          &lt;option&gt;Yes&lt;/option&gt;
          &lt;option&gt;No&lt;/option&gt;
          &lt;option&gt;Not Applicable&lt;/option&gt;
      &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt;
      Edit field if No is chosen
  &lt;/td&gt;
  </code></pre>
  
  <p>so basically what happens is in mozila when I scroll up and down I get this <code>Scroll Up</code>  :</p>
  
  <p><img src="https://i.stack.imgur.com/IgqVD.png" alt="TableUp"></p>
  
  <p>And here when I <code>Scroll down</code> :</p>
  
  <p><img src="https://i.stack.imgur.com/ahIlZ.png" alt="enter image description here"></p>
  
  <p>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: </p>
  
  <pre><code>table {
      border-collapse: collapse;
      width: 686px;
      margin: 0px 1px 20px 1px;
  }
  td {
     height: 55px;
  }
  </code></pre>
  
  <p>and all the tables are rendered inside a div tag which has this CSS attached :</p>
  
  <pre><code>#drawForm 
  {
      margin: 0 auto;
      width: 690px;
      height: 800px;
      padding-top: 2px;   
  
  }
  </code></pre>
  
  <p>So why and how can I fix this problem?</p>