ansaurus

Question

Why is <td> shrinking when I set child element to "width:80%" ?

Answer 1

+6 A:

The problem that you are having is because you are setting the <input>'s width to be a percentage of a cell that has no width. So the cell is becoming smaller to make up for the text on the other cell and once that's done the input is getting 80% of whatever is left.

Your options:
1) Set a width in pixels for the <input> field.
2) Set a width in pixels/percentage for the <td>.

addressing your comment: When you remove the style, the reason it is getting larger is because it is going back to the browser's default size for <input> elements, which is bigger than 80% of whatever's left in the cell.

Paolo Bergantino 2009-01-20 20:48:40

And when I remove the style, the input is sizing first? So my catch 22 idea is accurate?

John MacIntyre 2009-01-20 20:52:02

This works if type="text", but not if type="file". Any idea what the problem here is?

eduffy 2009-05-01 15:52:52

What happens with type="file"?

Paolo Bergantino 2009-05-01 17:24:04

It's just the default size, it doesn't fill up the td.

eduffy 2009-05-01 19:41:13

Well, type="file" inputs are notoriously difficult to mess around with as depending on the browser and operating system they pretty much do whatever the heck they want with it. If you post a question with more details I might be able to help but for the most part you're out of luck unless you want to use a flash interface or something.

Paolo Bergantino 2009-05-01 19:51:27

Answer 2

+1 A:

You could give an explicit width to the first column:

<table width="100%" border="1">
    <tr>
            <td width="20%">
                    <input type="text" style="width: 80%;" />
            </td>

Ates Goral 2009-01-20 20:49:15

ansaurus

tags:

views:

answers:

Why is <td> shrinking when I set child element to "width:80%" ?

related questions