HTML表格边框现在在asp.net mvc 3视图中显示
因此,下面是针对我为解决此问题所做的不同尝试使用几个打印屏幕显示的问题。所有这些都发生在ASP.NET MVC 3 View中。HTML表格边框现在在asp.net mvc 3视图中显示
创建我的表是这样的:
<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>
尝试使用这个CSS声明,这足以让你得到一个边界为您表元素和每个细胞
#drawForm table {
border-collapse: collapse;
}
#drawForm table, .drawForm table td {
border: 1px solid #aaaaaa;
}
而且它好像你会遇到这个问题,因为你正在循环tr和td,很少有td被遗漏,从而搞乱了你的表格,因为你需要声明rowspan
和colspan
中看到它了,就这样,我根本就没有任何边界。 – Leron 2013-04-25 12:25:23
@Leron完全对不起,我用'#'替换'''现在你可以试试 – 2013-04-25 12:27:24
@ GabyakaG.Petrioli我刚刚意识到:) – 2013-04-25 12:28:26
您是使用默认样式还是自定义CSS? – codingbiz 2013-04-25 12:22:17
你使用什么浏览器? – 2013-04-25 12:24:42
我正在使用Mozilla,并且唯一的自定义CSS是我发布的CSS。 – Leron 2013-04-25 12:27:00