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

时间:2015-02-25 00:16:34

标签: html css

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

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

我尝试使用style =“width:100%;”和“< span>”,不工作......

尝试删除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”文本框不会跨越整个表格行:

enter image description here

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

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

2 个答案:

答案 0 :(得分: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;

答案 1 :(得分:0)

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