如何在javascript中将列填充添加到特定表的第一列？

Question

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 (eg 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?

Answer 1

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

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

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

Answer 2

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> 

Answer 3

You should CSS to accomplish 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

Answer 4

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>