html table scroll bar covers part of last cell

Question

I have a table with 3 cells across - The scroll bar covers part of the right hand cell making the 3 cells different widths AND part of the data in the right hand cells are coverd

I've tried all sorts of things including ones recommended here

Here is my code

<div style="padding: 15px; height: 500px;width: 775px;  overflow: auto;">

<table class="aligncenter" width = "500" style="border-width: 1px; border-color: #6b1ae4; background-color: #cfdfee;" border="1" cellspacing="1" cellpadding="1" align="center">
<tbody>
<tr>
<td>cell #1a...............</td>
<td>cell #2a...............</td>
<td>cell #3a...............</td>
</tr>
<tr>
<td>cell #1b...............</td>
<td>cell #2b...............</td>
<td>cell #3b...............</td>
</tr>
</tbody>
</table>
</div>

Answer 1

This is the code that worked for me

<div style="padding: 1px; height: 500px;width: 775px;  overflow: auto;">
<table class="aligncenter" width = "755" style="border-width: 1px; border-color: #6b1ae4; background-color: #cfdfee;" border="1" cellspacing="1" cellpadding="1" align="center">

I think making the width of the table smaller than the width of the div did it - Then I just played with the numbers to get it just right

Answer 2

Is it something you are looking for:

<div style="padding: 15px; height: 500px;width: 775px;  overflow: auto;">

<table class="aligncenter" style="width:500px;" style="border-width: 1px; border-color: #6b1ae4; background-color: #cfdfee;" cellspacing="1" cellpadding="1" align="center">
<tbody>
<tr>
<td>cell #1a...............</td>
<td>cell #2a...............</td>
<td>cell #3a...............</td>
</tr>
<tr>
<td>cell #1b...............</td>
<td>cell #2b...............</td>
<td>cell #3b...............</td>
</tr>
</tbody>
</table>
</div>