CODEWITHSUNDEEP
htmlcss
Marcin Kowal
Marcin Kowal

Reputation: 73

Strange column width behavior when input inside

I am struggling with given problem:

html:

<table>
    <thead>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><div>Data 1</div></td>
        <td ><div><input/></div></td>
        <td><div>Data 2</div></td>
    </tr>
    </tbody>
</table>

css:

th {
    width: 50px;
}

input {
    width: 100%;
}

fiddle:

https://jsfiddle.net/Lcdvpk1y/1/

The problem is that this example is shown differently in different browsers. On Chrome column withinput has independent computed width, but on IE and Edge width is taken from specified value.

I am eager to know cause of this different behaviour because it's simplified example of bigger problem, where I can't customize my code as I wish, has to know cause to apply the simplest solution.

Upvotes: 0

Views: 58

Answers (2)

alexndreazevedo
alexndreazevedo

Reputation: 381

If you remove the <div> inside each <td>, you could get the correct appearance.

For fix it only with CSS (without change the markup), the following snippet should work.

td {
    width: 50px;
}

td div {
    width: inherit;
}

td div input {
    width: 100%;
}

https://jsfiddle.net/alexndreazevedo/d9fxu41z/

Upvotes: 0

brodym46
brodym46

Reputation: 11

Do you have reset.css linked in your file? That could cause strange behavior in sizing across different browsers.

Try linking this in an external stylesheet:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Upvotes: 1

Related Questions