What's wrong with my td sizes?

<div id="scadenta" style="width:191px; overflow:hidden; border:1; height:90px;">
    <table style="width:100%;">
        <tr>
            <td style="width:40%;"><input type="text"></in开发者_JS百科put></td>
            <td style="width:20%;"><input type="text"></input></td>
            <td style="width:40%;"><input type="text"></input></td>
        </tr>
    </table>
</div>

This is a testing layout i use for one of my tables. It's supposed to have 2 big columns hugging a smaller one. The problem is the tr and td sizes just don't work. I get the all the TDs the same size and almost as large as the whole table. Is there something fundamentally wrong with my code or what else could be causing it to behave like this?

Nothing is wrong... Your td's are styling just fine. They problems lays in the fact that your are setting the table width to 100% AND to 191px AND you are overflowing the table. It's all contradicting. Just start again, remove the width and style and set a border around the td's, that will show you that they will take the correct width.

you'll have to set a width for your'inputs, otherwise they're set to the browsers default size. take a look at this jsfiddle-example with style="width:90%;" set on the inputs (using 100% will make the inputs bigger than the tds because of the default-padding - see the box-model for more information about this).

note that i also removed the closing </input>-tags and made them empty elements (<input ... />) like it should be (but this has nothing to do wirth your question).

<input type="text"></input> is simply wrong. Either do <input type="text" /> or just <input type="text">.

Another problem is the default width of the input fields. You are only providing 191px width overall, but one input field almost fills that width. So putting an input field into 20% of 191px will simply extend the td so that it fits.

the input tag has a set minimum width that is being applied by the browser, you can either increase the size of your div or declare the input type size to be 100%.

input {
   width:100%;
}

change from <input type="text"></input> to <input type="text" />