HTML表格边框现在在asp.net mvc 3视图中显示

Question

因此，下面是针对我为解决此问题所做的不同尝试使用几个打印屏幕显示的问题。所有这些都发生在ASP.NET MVC 3 View中。

创建我的表是这样的：

<div id="drawForm"> 
    <table id="drawTemplate" style="border:1px solid lightgrey;border-collapse: collapse"> 
     @for (var i = 0; i < Model.Count; i++) 
     { 
      if (Model[i].Columns.Count > 0) 
      { 
       <tr> 
        @for (var j = 0; j < Model[i].Columns.Count; j++) 
        { 
         <td> 
          @Html.HiddenFor(x => x[i].Columns[j].RowNumber) 
          @Html.HiddenFor(x => x[i].Columns[j].ColumnNumber) 
          @Html.DisplayFor(x => x[i].Columns[j].QuestionText) 
          @Html.EditorFor(x => x[i].Columns[j].FieldValue) 
         </td> 
        } 
       </tr> 
      } 
     } 
    </table> 
    </div> 

通告表的样式，在边框设置为1px我得到这个：

对一些搜索后主题我发现了一些解决方案，保持一切只是将表格边界值从1更改为3px。这样做后，我得到：

现在我可以看到所有的边界和我设置边框为红色只是为了更清楚我的意思的颜色，其实我可以将其设置为lightgray这几乎是可以接受的，但其中之一 - 这似乎是这样做的一种破解，而且 - 也看不到一些不寻常的事情，不允许正常渲染桌面，当然 - 我真的很喜欢有一个正常的表格布局，而不是因为这个原因而被迫改变边界宽度。

我使用一些造型这两个例子一样的，所以我把它的结尾：

#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; 
} 

所以我想知道的是 - 为什么我会在第一位，这个问题当然 - 除了这个边框宽度的技巧之外，还有什么办法可以解决它吗？

PS

HTML输出：

<table id="drawTemplate" > 
       <tr> 
         <td> 
          <input name="[0].Columns[0].RowNumber" type="hidden" value="1" /> 
          <input name="[0].Columns[0].ColumnNumber" type="hidden" value="1" /> 
          alabala 
          <input class="text-box single-line" name="[0].Columns[0].FieldValue" type="text" value="" /> 
         </td> 
         <td> 
          <input name="[0].Columns[1].RowNumber" type="hidden" value="1" /> 
          <input name="[0].Columns[1].ColumnNumber" type="hidden" value="2" /> 

          <input class="text-box single-line" name="[0].Columns[1].FieldValue" type="text" value="yes" /> 
         </td> 
       </tr> 
       <tr> 
         <td> 
          <input name="[1].Columns[0].RowNumber" type="hidden" value="2" /> 
          <input name="[1].Columns[0].ColumnNumber" type="hidden" value="1" /> 
          alabala 
          <input class="text-box single-line" name="[1].Columns[0].FieldValue" type="text" value="yes" /> 
         </td> 
       </tr> 
       <tr> 
         <td> 
          <input name="[2].Columns[0].RowNumber" type="hidden" value="3" /> 
          <input name="[2].Columns[0].ColumnNumber" type="hidden" value="1" /> 
          alabala 
          <input class="text-box single-line" name="[2].Columns[0].FieldValue" type="text" value="yes" /> 
         </td> 
       </tr> 
       <tr> 
         <td> 
          <input name="[3].Columns[0].RowNumber" type="hidden" value="4" /> 
          <input name="[3].Columns[0].ColumnNumber" type="hidden" value="1" /> 
          alabala 
          <input class="text-box single-line" name="[3].Columns[0].FieldValue" type="text" value="no" /> 
         </td> 
         <td> 
          <input name="[3].Columns[1].RowNumber" type="hidden" value="4" /> 
          <input name="[3].Columns[1].ColumnNumber" type="hidden" value="2" /> 
          alabala 
          <input class="text-box single-line" name="[3].Columns[1].FieldValue" type="text" value="no" /> 
         </td> 
         <td> 
          <input name="[3].Columns[2].RowNumber" type="hidden" value="4" /> 
          <input name="[3].Columns[2].ColumnNumber" type="hidden" value="3" /> 
          alabala 
          <input class="text-box single-line" name="[3].Columns[2].FieldValue" type="text" value="no" /> 
         </td> 
       </tr> 
       <tr> 
         <td> 
          <input name="[4].Columns[0].RowNumber" type="hidden" value="5" /> 
          <input name="[4].Columns[0].ColumnNumber" type="hidden" value="1" /> 
          alabala 
          <input class="text-box single-line" name="[4].Columns[0].FieldValue" type="text" value="no" /> 
         </td> 
         <td> 
          <input name="[4].Columns[1].RowNumber" type="hidden" value="5" /> 
          <input name="[4].Columns[1].ColumnNumber" type="hidden" value="2" /> 

          <input class="text-box single-line" name="[4].Columns[1].FieldValue" type="text" value="no" /> 
         </td> 
       </tr> 
       <tr> 
         <td> 
          <input name="[5].Columns[0].RowNumber" type="hidden" value="6" /> 
          <input name="[5].Columns[0].ColumnNumber" type="hidden" value="1" /> 
          alabala 
          <input class="text-box single-line" name="[5].Columns[0].FieldValue" type="text" value="" /> 
         </td> 
       </tr> 
       <tr> 
         <td> 
          <input name="[6].Columns[0].RowNumber" type="hidden" value="7" /> 
          <input name="[6].Columns[0].ColumnNumber" type="hidden" value="1" /> 
          alabala 
          <input class="text-box single-line" name="[6].Columns[0].FieldValue" type="text" value="no" /> 
         </td> 
       </tr> 

Answer 1

尝试使用这个CSS声明，这足以让你得到一个边界为您表元素和每个细胞

#drawForm table { 
    border-collapse: collapse; 
} 

#drawForm table, .drawForm table td { 
    border: 1px solid #aaaaaa; 
} 

而且它好像你会遇到这个问题，因为你正在循环tr和td，很少有td被遗漏，从而搞乱了你的表格，因为你需要声明rowspan和colspan