Я пытаюсь создать форму с помощью таблицы. Всего у меня 7 полей. Я надеюсь получить 3 поля в одной строке, 3 поля во второй строке, а последняя строка будет последним расширенным полем. Я пробовал использовать colspan, однако поле редактора для NextAction не расширяется до конца. В правой части этого поля есть поле. Я попытался создать класс CSS, чтобы убрать маржу, но это тоже не сработало.
Как мне сделать так, чтобы поле NextAction простиралось до последнего столбца?
Ниже я добавил свой код для последних двух строк моей таблицы.
<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>
Я отредактировал свой код. Вот полный код моей таблицы.
Похоже, вы используете бутстрап. Зачем использовать HTML-таблицу, а не CSS-классы Bootstrap? Можете ли вы подтвердить, что используете Bootstrap?
Первоначально я использовал бутстрап, но столбцы были перепутаны, поэтому я выбрал HTML, так как я его лучше понимаю.
вам нужно объединить все остальные ячейки и увеличить таблицу. теперь ширина таблицы 3, и вы хотите сделать 5, это невозможно
Сейчас ширина таблицы 6 столбцов. Каждая метка имеет свой собственный столбец, и каждое поле ввода имеет свой собственный столбец. Для моей последней строки я хочу, чтобы метка была 1 столбцом, а ввод - 5 столбцами.





Поскольку в вашем проекте включен Bootstrap, используйте CSS-класс Bootstrap w-100. Этот класс создаст элемент, который будет иметь 100% ширину. Вот обновленная строка EditorFor с добавленным классом:
@Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control w-100"} })
Если это не сработает, скорее всего, у вас есть что-то другое, отменяющее его. Проверьте другие таблицы стилей и HTML-код, отображаемый в вашем браузере.
@ user9448003 Если я ответил на ваш вопрос, подумайте о том, чтобы выбрать мой ответ как «Лучший ответ». Спасибо!
вы можете опубликовать полный код?