views:

1596

answers:

3

Hi All,

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?

TIA,

+3  A: 

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

ntan
I'm not completely sure, but I think there 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. That is, if the td is 100px wide and the text box has, say, 1px border and 4px padding, the text box will acutally need a total width of 100 + 2 * (1 + 4) = 110px if set to width="100%". I think.
Anders Fjeldstad
Ha! As simple as that! Works fine in IE8 but not in Chrome: the width percentage matches the col width but comlumns are widened though.
Serge - appTranslator
You can try width:auto or width:inherit
ntan
`auto`/`inherit` width won't do it, you'd need `100%`. If you find that the extra size is affecting column widths, that means you must be using the default `auto` table layout. You don't generally want auto table layout as it's slow to render and unpredictable. Best is to set `table-layout: fixed` and give the columns you want to be fixed an explicit width (on the first row of cells, or, better, with `<col>`). Columns without explicit width share the remainder width amongst them.
bobince
It all worked well when I got rid of some of the column width specifications. I guess I'll never know why!
Serge - appTranslator
+1  A: 

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 */
David Thomas
+2  A: 

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.

bobince
thanks for the info about box-sizing
Serge - appTranslator