CODEWITHSUNDEEP
htmlcsshtml-table
John MacIntyre
John MacIntyre

Reputation: 13031

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

I have a table where one of the left column shrinks when I set the nested element's style to width:80%. The column shrinks and truncates the input elements right edge. You can see what I'm talking about by removing the style from the input element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td>
                <input type="text" style="width: 80%;" />
            </td>
            <td>
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
            </td>
        </tr>
    </table>
</body>
</html>

I've got a feeling it's because the columns are sized based on children, but by sizing the element based on it's parent, I've created a 'catch 22'.

Can somebody please enlighten me as to what is going on, and how I might maintain the same column width, and size my element to 80% of it's width?

Upvotes: 1

Views: 1807

Answers (2)

Paolo Bergantino
Paolo Bergantino

Reputation: 488704

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.

Upvotes: 7

Ateş G&#246;ral
Ateş G&#246;ral

Reputation: 140152

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>

Upvotes: 1

Related Questions