如何添加列填充到JavaScript中特定表格的第一列？

Question

我有一個動態創建的表格。

編輯：實施例的代碼來創建該表是here：

我需要將兩列（例如50像素）之間添加間隔。我讀過最好的方法是在第一列的右側添加填充，但我不確定如何使用表的類名將間距添加到JavaScript中的第一列？

我加在原來的答案提供像這樣的CSS：

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

，但它並不會應用於表，這就是爲什麼我要求在JavaScript的解決方案。如何確保在創建表之後才調用CSS？

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"); 
} 

小提琴：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>

Answer 3

你應該CSS來實現這一目標。使用：第一個孩子選擇器。

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

字體：Set alignment and padding of first and second column in <table> via 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>