I have a table which is created dynamically in javascript.

EDIT: Example code to create the table is here:

I need to add spacing between the two columns (e.g. 50px). I have read that the best way is to add padding to the right of the first column, but I am not sure how to add the spacing to the first column in javascript using the table's class name?

I added the CSS provided in the original answers like so:

.informationWindowTable > tr > td:first-child {padding-right:50px;}

but it does not get applied to the table and that is why I asked for a solution in javascript. How do I ensure that the CSS is called only after the table is created?

I have a table which is created dynamically in javascript.

EDIT: Example code to create the table is here:

I need to add spacing between the two columns (e.g. 50px). I have read that the best way is to add padding to the right of the first column, but I am not sure how to add the spacing to the first column in javascript using the table's class name?

I added the CSS provided in the original answers like so:

.informationWindowTable > tr > td:first-child {padding-right:50px;}

but it does not get applied to the table and that is why I asked for a solution in javascript. How do I ensure that the CSS is called only after the table is created?

• javascript
• jquery
• css

• Why javascript ? CSS is what should be used for styling and since you already have a class on the table you should use that. – Gabriele Petrioli Commented Oct 6, 2015 at 21:42
• @GabyakaG.Petrioli, I edited the question to make it clear why I asked for Javascript, but if there is an answer for CSS it would also help. – sim1 Commented Oct 7, 2015 at 7:07

4 Answers 4

This is best done in CSS

table tr td:first-child {
  padding-right: 50px;
}

However, it can be done in JavaScript

var tableCells = document.querySelectorAll("table tr td:first-child");

for (var i = 0; i < tableCells.length; i++) {
    tableCells[i].classList.add("give-padding");
}

Fiddle: http://jsfiddle/8y9qc0o0/

Instead of adding to the classList, you can also use the document.style.property syntax.

tableCells[i].style.padding-right("50px");

Depending on the usecase border-spacing property might also be useful:

.tab {
    border-collapse: separate;
    border-spacing: 50px 1px;
}
.tab td {border: 1px #AAA solid; padding: 10px;}

<table class="tab">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

You should CSS to acplish that. Use the :first-child selector.

td:first-child { text-align: right }

Font: Set alignment and padding of first and second column in <table> via CSS

Perhaps splitting the padding between the two td is the best for balance

.tab td:nth-child(even) {padding-left:25px;}
.tab td:nth-child(odd){padding-right:25px;}

<table class="tab">
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
</table>