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

[jenusys]

¿Por qué no trazas TODA la tabla desde su origen? Si es por tiempo de ejecución te aseguro que unos milisegundos de diferencia no se notarán mucho que digamos.

[IsaBelM]

creo que te problema se resuelve con css (table-layout)

[malakian]

Hola @jenusys desafortunadamente para mi tengo que dejarlo asi, tambien lo habia pensado asi, ahi alguna solucion??
dandole un width a los td's individualmente no se comportan de una manera deseada

[malakian]

Hola @IsaBelM contigo he aprendido algo nuevo, la verdad desconocia esa propiedad, sin embargo, no me funciona, trate de colocar unas celdas iniciales con los tamaños que queria, para ver si las nuevas tomaban el mismo tamaño, pero no, es mas me modifica las celdas iniciales....

Tambien coloque tamaños individuales y tampoco, use table-layout: fixed;


algun otro consejo?? gracias

[IsaBelM]

entonces el problema es que al último td le asignas un width. compara

<div style="overflow:auto; width:scroll; height:255px;background-color: #FFFFFF; border:solid">
<table style="width:100%;">
<tbody id="CuerpoTabla" >
<tr><td style="width:5%">Dato1</td><td style="width:10%">Dato2</td><td style="width:20%">DatoX</td></tr>
<tr><td>nuevo Dato1 con mas texto</td><td>Dato2</td><td>DatoX</td></tr>
</tbody>
</table>
<div>

<div style="overflow:auto; width:scroll; height:255px;background-color: #FFFFFF; border:solid">
<table style="width:100%;">
<tbody id="CuerpoTabla" >
<tr><td style="width:5%">Dato1</td><td style="width:10%">Dato2</td><td>DatoX</td></tr>
<tr><td>nuevo Dato1 con mas texto</td><td>Dato2</td><td>DatoX</td></tr>
</tbody>
</table>
<div>

[malakian]

Hola @IsaBelM bueno, dejame contarte que lo de table-layout me funciono, pero esas celdas creadas dinamicamente se deben poder ocultar y mostrar, y cuando las oculto y las vuelvo a mostrar es que se descontrolan... lo hago con una funcion que hace esto dependiendo el caso

Código Javascript:

document.getElementById("celda1").style.display = "none";
 
// o para mostrarlo
 
document.getElementById("celda1").style.display = "block";
 

siento que me estoy poniendo fastidioso, pero es que este comportamiento de las celdas es indeseable, enserio, agradezco mucho la ayuda

[IsaBelM]

celda1 es la id de un td?? si es así, es normal que se descuadre todo. la única propiedad que conozco que hará que una celda no sea mostrada y aún así continúe ocupando espacio es empty-cells. la condición es que la celda no ha de tener contenido. por lo tanto, no es una solución y no creo que la haya

edito: si lo que realmente ocultas y muestras son todas la filas y columnas creadas, no comprendo ese comportamiento