How to add column padding to the first column of a specific table in javascript?

Question

I have a table that is dynamically created in javascript.

EDIT: Sample code to create a table here :

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

I added CSS to the original answers like this:

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

but it does not apply to the table, and so I asked for a solution in javascript. How to ensure that CSS is called only after the table is created?

Answer 1

CSS

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

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.net/8y9qc0o0/

classList document.style.property.

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

Answer 2

border-spacing :

.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>

Hide result

Answer 3

CSS . : first-child.

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

: <table> CSS

Answer 4

, td

.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>

Hide result