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

Question

处理 asp.net MVC 5 元素并使用表格显示多个控件。

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

我试过 style="width: 100%;"和“<跨度>”，不工作....

尝试删除 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 的 google inspect 元素；作为 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 上应该工作，input跨度列中宽度为 100% 的列应适合整个列。不需要用 <span> 包装自引导类 form-control 以来无需设置宽度已经做到了。 这是一个工作示例:

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