0

所以这是我为解决这个问题所做的不同尝试的几个打印屏幕说明的问题。所有这些都发生在 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;
}

所以我想知道的是 - 为什么我首先会遇到这个问题,当然 - 除了这个与边框宽度有关的技巧之外,还有什么方法可以解决它?

附言

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>
4

1 回答 1

1

尝试使用这个 CSS 声明,为你的表格元素和每个单元格获得一个边框就足够了

#drawForm table {
   border-collapse: collapse;
}

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

此外,您似乎会遇到这个问题,因为您正在循环遍历 tr 和 td,其中很少有 td 被遗漏,因此您需要声明rowspancolspan

于 2013-04-25T12:14:50.663 回答