html - 表格中的固定分隔线

Question

我的表格有些问题，因为随着文本的增加，我似乎无法修复分隔线。随着文本变长，它会将分隔线移动几个像素。我将发布一些屏幕截图供您查看。

在添加一些文本后：

变成这样。那么有没有人可以帮助我解决这个问题？顺便说一句，这是我的代码

 <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>

我也想删除底部滚动条，但我似乎也无法隐藏它。

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