HTML table cannot span textbox for several columns

Question

Working on a asp.net MVC 5 projec and to using a table to display several controls.

On the second row I want the textbox to span 5 columns, showing a long text on it. But textbox display as nomal width, cannot span it or make it wider.

I have try with style="width: 100%;" and with "< span >", not working....

try remove CSS reference (class="form-control"), same behavior

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

As show on the capture, "Direccion" Textbox don't span full table row:

enter image description here

Finally I was able to fixed adding: style="max-width: 100%;"

I notice using google inspect element that max-width: 280px; was added as part of bootswatch CSS.

instead of saying "no luck" can you describe what is the problem exactly? the colspan? the long text? the input width? Also, this isn't really related to asp.net, but instead to html/css. You can write minimal html example of the problem and post that instead of the larger asp, it would be easier to understand. — Iftah, Feb 25 '15 at 00:21
This is not tabular data so why are you using a table? And you appear to be using bootstrap anyway so why aren't you using its layout features? — , Feb 25 '15 at 00:25
@Iftah update description, yes, colspan its not working, textbox is normal width, cannot span it. — atlus, Feb 25 '15 at 00:35
@Stephen, sorry, very noob, still learning bootstrap/asp, trying to emulate an excel input form that is currently used, I think tables were the best option, but will try make a new page using pure bootstrap layout....please recommend best option — atlus, Feb 25 '15 at 00:37
"*I have try with style="width: 100%;" and with "< span >" not working....*" That's because a `span` is an inline element and cannot have a specified width. — Ian Hazzard, Feb 25 '15 at 01:09

score 1 · Answer 1 · edited May 23 '17 at 12:06

I agree with @StephenMueke, you should not use tables for layout. Instead you can use the bootstrap grid classes, eg:

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

The Bootstrap grid has a nice feature that it works nicely in low resolution screens (eg. phones, tablets), its really neat.

Or even better, use the bootstrap layout for forms, those are planned to look like professional UI forms and not excel rows.

--

Regarding your original question, still its not clear exactly what isn't working for you. colspan on the td should work, and the input with 100% width in the spanned column should fit entire column. No need wrapping with <span> and no need setting width since the bootstrap class form-control already does exactly that. Here is a working example:

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

I have added an screenshot, now you can see how the textbox is not spanning the whole row.... — atlus, Feb 25 '15 at 01:14
please copy the relevant html section to your question, ie. include the row with the td with the colspan — Iftah, Feb 25 '15 at 01:42
remove the span around the input, it has no affect. But I don't see anything wrong other than that. Maybe there is some CSS rules for the input? Use Chrome developer tools to inspect the element and see why the 100% is being overridden. — Iftah, Feb 25 '15 at 01:55
thanks for the tip, using Chrome developers tools I was able to notice that max-width: 280px; wass added to all controls, I replace it with style="max-width: 100%; and now it works!!!! — atlus, Feb 25 '15 at 18:27

score 0 · Accepted Answer · answered Feb 25 '15 at 18:28

using Chrome developers tools I was able to notice that max-width: 280px; wass added to all controls, I replace it with style="max-width: 100%; and now it works!!!!

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

HTML table cannot span textbox for several columns

2 Answers2