Javascript to align Table Cell is not working when table rows are dynamically generated

Question

I am generating table rows dynamically using javascript. I can set up height of new cells but could not align the cell content.

Here is my HTML and Javascript

<table id="myTable">
<tr>
<td height="50" valign="top">Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table><br>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell1.height = "50";
cell1.valign = "top";
}
</script>

Rashmin Javiya · Accepted Answer · 2014-05-05 18:10:00Z

2

You have written valign but it is actually vAlign (A is capital)

cell1.vAlign = "top";

answered May 5, 2014 at 18:10

Rashmin Javiya

5,2223 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript to align Table Cell is not working when table rows are dynamically generated

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related