why input width 100% in table-layout auto expands in IE7?

Question

I have a table with constraint width and table cell with percentage width. In the cell i've input or textarea with style="width:100%", without any margin, padding nor border but with some longer content without spaces. Why IE7 and IE6 expand the input to match the content length?

Applying table-layout: fixed to the table is not an option -- I relay on the columns expanding to keep their content (e.g. columns with input labels should match labels length).

Full example follows. I've check that this is valid HTML5 rendered in standards mode.

<!doctype html>
<meta charset="utf-8" />
<title>ie6 ie7 input bug</title>
<style>

  input, textarea {
    width: 100%;
    margin: 0; padding: 0; border: 0;
  }

  table {
    background: yellow;
    width: 500px;
  }

</style>
<body>
  <table>
    <tr>
      <td style="width: 15%;">
        <input value="VeryLongTextWithoutSpaces" />
      </td>
      <td> <br/><br/><!-- give height --> </td>
    </tr>
  </table>
  <br/> <!-- textarea example -->
  table>
    <tr>
      <td style="width: 15%;">
        <textarea>VeryLongTextWithoutSpaces</textarea>
      </td>
      <td> <br/><br/><!-- give height --> </td>
    </tr>
  </table>
</body>

missing your opening and closing html tags. (not that this solves the problem, just saying.) — Gregg B, Nov 16 '10 at 14:59
possible duplicate of [textarea with 100% width ignores parent element's width in IE7](http://stackoverflow.com/questions/33933/textarea-with-100-width-ignores-parent-elements-width-in-ie7) — The Archetypal Paul, Nov 16 '10 at 15:01
@Paul -- my table is used in liquid layout width width 100% (it doesn't change the problem), so i can't apply width in pixels to the `td`. @Grillz tags are optional -- this is valid HTML5, checked using w3 validator — Piotr Findeisen, Nov 16 '10 at 15:18
my own answer about applying `line-height` is not valid for long input without spaces, so I'am reediting my question — Piotr Findeisen, Nov 17 '10 at 10:52

score 0 · Accepted Answer · edited May 23 '17 at 12:19

0

I found that applying line-height to the input helps if the input never contains long words. ~~This may be enough for me~~ (I can calculate correct line-height), but other solutions are welcome, as may be more suitable for others.

finally I found the solution here textarea with 100% width ignores parent element's width in IE7: adding brutal word-break:break-all; is a solution.

edited May 23 '17 at 12:19

Community

1
1

answered Nov 16 '10 at 16:10

Piotr Findeisen

19,480
2
52
82

why input width 100% in table-layout auto expands in IE7?

1 Answers1