Таблица с Html.EditorFor

Question

Я пытаюсь создать форму, используя таблицу.У меня всего 7 полей.Я надеюсь, что у меня будет 3 поля в одной строке, 3 поля во второй строке, а последняя строка будет последним расширенным полем.Я попытался использовать colspan, однако окно редактора для NextAction не расширяется полностью.С правой стороны этого поля есть поле.Я пытался создать класс CSS, чтобы убрать поле, но это не сработало.

Как мне получить его, чтобы поле NextAction простиралось до последнего столбца?

Ниже я добавил свой код для последних 2 строк таблицы.

            <table>
            <tr>
                <td>
                    @Html.LabelFor(model => model.Customer, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td style="width:300px">
                    @Html.EditorFor(model => model.Customer, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Customer, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.Principal, htmlAttributes: new { @class = "control-label col-md-2" })
                </td>
                <td style="width:300px">
                    @Html.EditorFor(model => model.Principal, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Principal, "", new { @class = "text-danger" })
                </td>

                <td>
                    @Html.LabelFor(model => model.Product, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Product, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Product, "", new { @class = "text-danger" })
                </td>

            </tr>
            <tr>

                <td>
                    @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.DropDownListFor(m => m.Status, new SelectList(ViewBag.Status, "Status", "Text"), new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.Value, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Value, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Value, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.FollowUpDate, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    <div>
                        <div class="input-group date" data-provide="datepicker">
                            @Html.EditorFor(model => model.FollowUpDate, new { htmlAttributes = new { @class = "form-control" } })
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(model => model.NextAction, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td colspan="5">
                    @Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control ", @style = "margin-right: 0 !important;"} })
                    @Html.ValidationMessageFor(model => model.NextAction, "", new { @class = "text-danger" })
                </td>
            </tr>
        </table>

Answer 1

Поскольку в вашем проекте включена Bootstrap, используйте CSS-класс Bootstrap w-100.Этот класс создаст элемент, к которому он применяется, имеет ширину 100%.Вот обновленная строка EditorFor с добавленным этим классом:

@Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control w-100"} })

Если это не сработает, скорее всего, у вас есть что-то еще, переопределяющее это.Проверьте другие таблицы стилей и HTML-код, отображаемый в вашем браузере.