Question

我有一个在javascript中动态创建的表。

编辑：创建表的示例代码是here：

我需要在两列之间添加间距（例如50px）。我已经读过最好的方法是在第一列的右边添加填充，但我不知道如何使用表的类名将空格添加到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属性也可能有用：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你应该用CSS来实现这一目标。使用：first-child选择器。

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>

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

4 个答案: