title: HTML table border is now showing in asp.net mvc 3 view
body: <p>So here is the problem illustrated with couple of printscreens for the different attempts I made to solve this problem. All this is happening in ASP.NET MVC 3 View.</p>
  
  <p>I create my table like this :</p>
  
  <pre><code>&lt;div id="drawForm"&gt;
      &lt;table id="drawTemplate" style="border:1px solid lightgrey;border-collapse: collapse"&gt;
          @for (var i = 0; i &lt; Model.Count; i++)
          {
              if (Model[i].Columns.Count &gt; 0)
              {
                  &lt;tr&gt;
                      @for (var j = 0; j &lt; Model[i].Columns.Count; j++)
                      {
                          &lt;td&gt;
                              @Html.HiddenFor(x =&gt; x[i].Columns[j].RowNumber)
                              @Html.HiddenFor(x =&gt; x[i].Columns[j].ColumnNumber)
                              @Html.DisplayFor(x =&gt; x[i].Columns[j].QuestionText)
                              @Html.EditorFor(x =&gt; x[i].Columns[j].FieldValue)
                          &lt;/td&gt;
                      }
                  &lt;/tr&gt;
              }
          }
      &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Notice the styling of the table, when the border is set to 1px I get this :</p>
  
  <p><img src="https://i.stack.imgur.com/EcJCS.png" alt="One Pixel Table Border"></p>
  
  <p>After some search about the topic I found some sort of solution by keeping everything the same only changing the table border value from 1 to 3px. After doing this I get :</p>
  
  <p><img src="https://i.stack.imgur.com/EBN30.png" alt="Three Pixel Table Border"></p>
  
  <p>Now I can see all the borders and I set the color of the border to red just to be more clear what I am meaning, in fact I can set it to <code>lightgray</code> and it's almost acceptable but one - it seems like some sort of a hack by doing this, and also -  don't see something out of the ordinary which don't allow the normal rendering of the table and of course - I would really like to have a normal table layout and not to be forced to change the border width because of that.</p>
  
  <p>I use some styling which is the same for both examples so I left it for the end :</p>
  
  <pre><code>#drawForm 
  {
      margin: 0 auto;
      width: 690px;
      height: 800px;   
      border: 1px solid black; 
  
  }
  #drawTemplate {
      width: 690px;
  }
  tr 
  {
      height: 50px;
      border: 1px solid lightgrey;
      }
  td {
   border: 1px solid lightgrey;
  }
  </code></pre>
  
  <p>So the thing I would like to know is - why I get this problem at first place and of course - is there any way to deal with it besides this trick with the border width?</p>
  
  <p>P.S</p>
  
  <p>HTML output :</p>
  
  <pre><code>&lt;table id="drawTemplate" &gt;
                  &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input name="[0].Columns[0].RowNumber" type="hidden" value="1" /&gt;
                              &lt;input name="[0].Columns[0].ColumnNumber" type="hidden" value="1" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[0].Columns[0].FieldValue" type="text" value="" /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input name="[0].Columns[1].RowNumber" type="hidden" value="1" /&gt;
                              &lt;input name="[0].Columns[1].ColumnNumber" type="hidden" value="2" /&gt;
  
                              &lt;input class="text-box single-line" name="[0].Columns[1].FieldValue" type="text" value="yes" /&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input name="[1].Columns[0].RowNumber" type="hidden" value="2" /&gt;
                              &lt;input name="[1].Columns[0].ColumnNumber" type="hidden" value="1" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[1].Columns[0].FieldValue" type="text" value="yes" /&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input name="[2].Columns[0].RowNumber" type="hidden" value="3" /&gt;
                              &lt;input name="[2].Columns[0].ColumnNumber" type="hidden" value="1" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[2].Columns[0].FieldValue" type="text" value="yes" /&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input name="[3].Columns[0].RowNumber" type="hidden" value="4" /&gt;
                              &lt;input name="[3].Columns[0].ColumnNumber" type="hidden" value="1" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[3].Columns[0].FieldValue" type="text" value="no" /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input name="[3].Columns[1].RowNumber" type="hidden" value="4" /&gt;
                              &lt;input name="[3].Columns[1].ColumnNumber" type="hidden" value="2" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[3].Columns[1].FieldValue" type="text" value="no" /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input name="[3].Columns[2].RowNumber" type="hidden" value="4" /&gt;
                              &lt;input name="[3].Columns[2].ColumnNumber" type="hidden" value="3" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[3].Columns[2].FieldValue" type="text" value="no" /&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input name="[4].Columns[0].RowNumber" type="hidden" value="5" /&gt;
                              &lt;input name="[4].Columns[0].ColumnNumber" type="hidden" value="1" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[4].Columns[0].FieldValue" type="text" value="no" /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input name="[4].Columns[1].RowNumber" type="hidden" value="5" /&gt;
                              &lt;input name="[4].Columns[1].ColumnNumber" type="hidden" value="2" /&gt;
  
                              &lt;input class="text-box single-line" name="[4].Columns[1].FieldValue" type="text" value="no" /&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input name="[5].Columns[0].RowNumber" type="hidden" value="6" /&gt;
                              &lt;input name="[5].Columns[0].ColumnNumber" type="hidden" value="1" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[5].Columns[0].FieldValue" type="text" value="" /&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input name="[6].Columns[0].RowNumber" type="hidden" value="7" /&gt;
                              &lt;input name="[6].Columns[0].ColumnNumber" type="hidden" value="1" /&gt;
                              alabala
                              &lt;input class="text-box single-line" name="[6].Columns[0].FieldValue" type="text" value="no" /&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>