javascript - Howto avoid MSIE scrolling a table with overflow: hidden; -

the last column of table intentionally clipped without scrollbars, using

overflow: hidden; 

on tables container. if enter columns input field pressing tab, on msie scrolls focused column viewport. turn feature off , make similar ff stays fixed.

edit: recognized ff doing same if column invisible, msie if column partially clipped.

edit: javascript solution welcome. 'preventdefault' have no idea on event hook.

#container {    width: 400px;    overflow: hidden;  }

<div id="container">    <table>      <thead>        <tr>          <th></th>          <th>a</th>          <th>b</th>          <th>c</th>        </tr>      </thead>      <tbody>        <tr>          <th>tab</th>          <td>            <input type='text' />          </td>          <td>            <input type='text' />          </td>          <td>            <input type='text' />          </td>        </tr>      </tbody>    </table>  </div>

this default behaviour of browser bring input view when focussing (actually when typing), pointed out @gyumfox.

what can is, either reset scroll or disable inputs out of bounds of table, using javascript.

option 1: (reset scroll)

this work fine in chrome , firefox give flicker in ie.

fiddle 1: http://jsfiddle.net/eg0ae5cg/1/

snippet 1:

$("#container").on("scroll", function() {      $(this).scrollleft(0);  });

#container {      table-layout: fixed; width: 400px; overflow: hidden;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="container">    <table>      <thead>        <tr>          <th></th><th>a</th><th>b</th><th>c</th>        </tr>      </thead>      <tbody>        <tr>          <th>tab</th>          <td><input type='text' /></td>          <td><input type='text' /></td>          <td><input type='text' /></td>        </tr>      </tbody>    </table>  </div>

option 2: (disable out-of-bound inputs)

this crude example. need fine-tune required.

*fiddle 2: http://jsfiddle.net/pkb2t127/1/ *

snippet 2:

var $tab = $("#container"),       $txt = $tab.find("input"),      w = $tab.width();    $txt.each(function() {      var lft = $(this).position().left,           rgt = lft + $(this).width();            if (rgt >= w) { $(this).prop("disabled", true); }  })

#container {      table-layout: fixed; width: 400px; overflow: hidden;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="container">    <table>      <thead>        <tr>          <th></th><th>a</th><th>b</th><th>c</th>        </tr>      </thead>      <tbody>        <tr>          <th>tab</th>          <td><input type='text' /></td>          <td><input type='text' /></td>          <td><input type='text' /></td>        </tr>      </tbody>    </table>  </div>

instead of disabled property, use readonly property keep input value in form post.