0

ビューに 4 つのテーブルをレンダリングしています。テーブルのうち 3 つは部分ビューです。ビューは次のとおりです。

@using (Html.BeginForm())
{
  <div id="drawForm">  
    @Html.Partial("_PartialHeader")
    @Html.Partial("_PartialDrawing")
    <table border="1">
    @for (int i = 0; i < 4; i++)
        { 
            <tr>
                <td>@(i+1)</td>
                @Html.Partial("_PartialDropDown")
            </tr>
        }
    </table>
    @Html.Partial("_PartialFooter")
  </div>
    <button type="submit">Save</button>
}

これは_PartialHeaderビューです：

<table border="1">
    <tr>
        <td>
            Logo drawing here
        </td>
    </tr>
</table>

これは_PartialDrawing:

<table border="1">
    <tr>
        <td>
            <img src="@Url.Content("~/Content/MachineDrawing.png")" alt="Logo" />
        </td>
    </tr>
</table>

そして_PartialFooter：

<table border="1" >
    <tr>
        <td>
            First sign
        </td>
        <td>
            Sexond sign  
        </td>
    </tr>
</table>

のみが_PartialDropDownテーブル自体ではありません。次のようになります。

<td>
    Type 1
</td>
<td>
    <select name="YesNoNotApplicable">
        <option>Yes</option>
        <option>No</option>
        <option>Not Applicable</option>
    </select>
</td>
<td>
    Edit field if No is chosen
</td>

したがって、基本的には、上下にスクロールすると mozilla で次のようになりますScroll Up 。

テーブルアップ

そしてここで私がScroll down：

ここに画像の説明を入力

一部の境界線が消え、他の境界線が表示されます。IE8 でテストしましたが、この問題は発生しません。私が使用しているCSSはこれです：

table {
    border-collapse: collapse;
    width: 686px;
    margin: 0px 1px 20px 1px;
}
td {
   height: 55px;
}

すべてのテーブルは、この CSS が添付された div タグ内でレンダリングされます。

#drawForm 
{
    margin: 0 auto;
    width: 690px;
    height: 800px;
    padding-top: 2px;   

}

では、なぜ、どうすればこの問題を解決できるのでしょうか?

4

1 に答える 1

0

そのため、ケースに応じて機能する2つの方法を見つけました。私の意見では、よりエレガントな方法は、フォーラムで読んだソリューションです。<thead>addとto the tables fix this issue. Other people were confirming that this solution works, however in my case it did not so instead I styled my table withborder-spacing: 0px;と言っていた。これはある種の回避策ですが、他に何も機能しない場合、結果は許容されます。

于 2013-05-09T09:39:03.333 に答える