Fixed divider in the table

Question

I'm having some troubles with my tables as I can't seem to fixed the divider as the text increases. It will move the divider by a few pixel as the text gets longer. I will post a few screen shots for you to see.

After adding some text in:

It becomes like this. So is there anyone out there that can help me with this? Btw this is my code

 <table border="2" style='overflow:scroll' height=50px >
        <th width=100px nowrap>Username</th>
        <th width=100px nowrap>Email</th>
 </table>
         <div style="height: 200px; overflow: scroll; width: 100%;">   
<table border="2" style='overflow:scroll' height=200px >     
   <g:each in="${result}" >
    <tr>
        <td width=100px nowrap style='overflow:hidden'>${it.username}aaaaaaaa</td>
        <td width=100px nowrap style='overflow:hidden'>${it.email}</td>
    </tr>       
        </g:each>
 </table>

I wanted to remove the bottom scroll bar too, but I can't seem to hide it too.

Answer 1

1) To remove bottom scrollbar change overflow:scroll to overflow-y:scroll or overflow:auto

2) To fix width issue either put width property of TD in style attribute (recommended)

style='overflow:hidden; width:100px'

OR

set width='100' only without word px