Ancho de <td> me tiene loco

[malakian]

Hola forer@s les cuento que estoy desesperado con esto, debe ser una bobada pero definitivamente no lo entiendo.

Tengo este codigo:

Código HTML:

<div style="overflow:scroll; width:auto; height:255px;background-color: #FFFFFF; border:solid">
  <table class="articulos">
    <tbody id="CuerpoTabla" >
                                
    </tbody>
  </table>
</div>
 

Hasta el momento no ahi problema, la cuestion es que por medio de una funcion hago una peticion AJAX que me devuelve unos datos, estos datos viene en algo asi:

Código HTML:

<tr><td>Dato1</td>
<td>Dato2</td><td>DatoX</td></tr>
 

y quiero meter esos datos dentro del tbody anterior, para eso hago

Código Javascript:

var elmTBODY = document.getElementById('CuerpoTabla');
elmTR = elmTBODY.insertRow(0);
elmTR.innerHTML = '<tr><td>Dato1</td><td>Dato2</td><td>DatoX</td></tr>';
 

Hasta ahi todo funciona bien, pero lo que quiero es que me ocupen todo el ancho del div en el que esta contenida la tabla, escribo width="100%" y nada, aumento el width de cada td individualmente y tampoco, ejemplo:

Código HTML:

<tr><td width="5%">Dato1</td><td width="10%">Dato2</td><td width="20%">DatoX</td></tr> ...etc etc etc
 

pero no se que pasa el ancho se vuelve loco, no me hace caso, a veces se ensancha mucho, a veces no hace nada, diganme que estoy haciendo mal por favor, o que tipo de estilo deberia usar??? ya me tiene loco enserio