HTML表格不能跨多个列的文本框

Question

使用asp.net MVC 5项目并使用表格显示多个控件。

在第二行，我希望文本框跨越5列，在其上显示长文本。但是文本框显示为正常宽度，不能跨越它或使其更宽。

我尝试使用style =“width：100％;”和“＆lt; span＆gt;”，不工作......

尝试删除CSS引用（class =“form-control”），同样的行为

        <table class="table table-striped table-hover ">
        <tr>
            <th>@Html.LabelFor(model => model.clienteID)</th>
            <th>
                @Html.DropDownListFor(model => model.clienteID, null, "-- Seleccione un Cliente --", new { @id = "cliente", @class = "form-control" })
                @Html.ValidationMessageFor(model => model.clienteID)
            </th>
            <th>@Html.LabelFor(model => model.cliente.telefonoCelular)</th>
            <th><input type="text" id="clienteCelular" readonly="readonly" class="form-control"></th>
            <th>@Html.LabelFor(model => model.cliente.telefonoOficina)</th>
            <th><input type="text" id="clienteTOficina" readonly="readonly" class="form-control"></th>
        </tr>
        <tr>
            <td>@Html.LabelFor(model => model.cliente.direccion)</td>
            <td colspan=5>
                <input type="text" style="max-width: 100%;"id="clienteDireccion" readonly="readonly" class="form-control">
            </td>
        </tr>

如捕获时所示，“Direccion”文本框不会跨越整个表格行：

最后我能够修复添加：style =“max-width：100％;”

我注意到使用谷歌检查元素，max-width：280px;是作为bootswatch CSS的一部分添加的。

Answer 1

我同意@StephenMueke，你should not use tables进行布局。相反，您可以使用引导网格类，例如：

<div class="row">
   <div class="col-md-2">Label here</div>  <!-- div takes 2 out of 12 columns -->
   <div class="col-md-10">Input here</div> <!-- div takes 10 out of 12 columns -->
</div>

Bootstrap网格有一个很好的功能，它在低分辨率屏幕（例如手机，平板电脑）中运行良好，非常整洁。

甚至更好，使用表单的引导布局，计划看起来像专业的UI表单而不是excel行。

-

关于你原来的问题，仍然不清楚究竟什么不适合你。 colspan上的td应该有效，并且跨越列中宽度为100％的input应该适合整列。不需要使用<span>包装，也不需要设置宽度，因为引导类form-control已经完全正确。 这是一个有效的例子：

＆＃13;

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover">
      <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
      <tr><td>Label:</td><td colspan=5><input class="form-control" value="a very very long text here..."></td></tr>
    </table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用Chrome开发者工具我能够注意到最大宽度：280px; wass添加到所有控件，我将其替换为style =＆＃34; max-width：100％;现在它的工作原理!!!!

<td colspan=5>
     <input type="text" style="max-width: 100%;"id="clienteDireccion" readonly="readonly" class="form-control">
 </td>