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