textboxes in HTML table: How to auto-size?

Question

I want to add a row at the bottom of my HTML table (or at the top, whatever) with a textbox in each column (to allow filtering of content of each column).

FWIW, the table is based on the jQuery DataTables plug-in.

The problem is that the textboxes widen the columns. I want each textbox to fill the width of its column without enlarging it. How can I do this?

Answer 1

try <input type="text" style="width:100%"/> to get the width of parent td.

Answer 2

I think [width 100%] could be a problem with this approach since the borders and padding of the text box take up some with that is added to the width.

Indeed.

You can compensate for this by adding padding-right to the cell containing the input (or just to all cells) of similar size to the borders-and-padding of the input. The input then expands out of the cell content area, but only onto the padding so it doesn't make a mess.

That's OK for just normal text inputs. If you've also got other elements such as select boxes or buttons you wish to resize this way, the padding method can backfire because on IE the ‘width’ of a select is inclusive of the border and padding (due to being an OS widget).

For most browsers, the easiest and most consistent way to fix this is the CSS3 box-sizing property:

td.input input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

IE6-7 doesn't support this yet, so you can still get fields that don't quite line up in these browsers. If you care, you can add a padding workaround specifically for those.

Answer 3

I've not used jQuery Tables, but I assume that if you set 'width: 80%;' and define a width for the 'td,' the text-box should inherit its dimensions from its parent (the 'td').

If that doesn't work, or you want a different approach, you could try:

td > input[type="text"] {width: 5em;} /* or whatever */

Answer 4

  table td {white-space: nowrap;}
  table th {white-space: nowrap;}

  td input[type="text"] {width: 100%;}

use !important to override other css rules