はみ出したtableにCSSでスクロールバーを表示させる方法【overflow】

CSS

.scroll_area{
    width:600px;
    overflow-x:scroll;
}
.scroll_area table{
    width:900px;
}

HTML

<div class="scroll_area" style="width:100%;max-width:600px;overflow-x:scroll;">
<table style="width:100%;">
<tr><th>ユーザー名</th><th>フリガナ</th><th>年齢</th><th>メールアドレス</th></tr>
<tr><th>池袋太郎</th><td>イケブクロタロウ</td><td>30歳</td><td>ikebukuro@sample.com</td></tr>
<tr><th>新宿太郎</th><td>シンジュクタロウ</td><td>40歳</td><td>shinjuku@test.com</td></tr>
<tr><th>渋谷太郎</th><td>シブヤタロウ</td><td>50歳</td><td>shibuya@sample.jp</td></tr>
</table>
</div>