overflowしたテーブルを一部だけ動かさない方法

スマフォでテーブルを表示させる際に、overflowを利用している方は多いと思います。

overflowしてスクロールしたテーブル内で一部（今回は画像）を動かさない方法です。

html

<div class="table-scroll">
    <table style="width: 690px;">
        <tbody>
            <tr class="odd">
                <td style="text-align: center;" colspan="2"><img class="aligncenter size-medium" src="" style="display: block;">
                </td>
            </tr>
            <tr class="even">
                <th style="text-align: center;">項目1</th>
                <td style="text-align: center;">内容1</td>
            </tr>
            <tr class="odd">
                <th style="text-align: center;">項目2</th>
                <td style="text-align: center;">内容2</td>
            </tr>
            <tr class="even">
                <th style="text-align: center;">項目3</th>
                <td style="text-align: center;">内容3</td>
            </tr>
        </tbody>
    </table>
</div>

css

.table-scroll{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

js

<script>
jQuery('.table-scroll').scroll(function(){
  var scr_img = jQuery(this).find("img");
  var scroll = jQuery(this).scrollLeft();
  sch_img.css("padding-left",scroll+10);
});
</script>