html - CellPadding 不适用于表格？

Question

使用 DOM 元素尝试将 cellPadding 添加到表格中:为什么

var FirstTabContent = document.createElement('div');
var Newtable = document.createElement('table');
Newtable.border = "1";
Newtable.cellpadding = "20px 20px 20px 20px";
///////////////
//populate table
///////////////
FirstTabContent.appendChild(Newtable);
return FirstTabContent.innerHTML;

返回:

<table border="1">
   <tbody>
      <tr>
         <td>
            <b>id</b>
         </td>
         <td>14079<br>
         </td>
      </tr>
   </tbody>
</table>

cellpadding 在哪里？

Answer 1

严格来说，cellPadding(大写 P)对应于 table 元素本身的 cellpadding 表示属性，它只接受一个单个长度或百分比:

Newtable.cellPadding = "20";

但是，如果您尝试通过 CSS 将单元格填充应用于此生成的表格(如 20px 20px 20px 20px 值所暗示的那样)，您应该使用 CSS，并且使用 CSS，您需要将其设置在 td 元素上而不是表格上:

td {
    padding: 20px;
}

否则，您将需要遍历表格中的所有单元格(一旦您添加了它们)并在它们上设置 style.padding，这非常乏味。

如果您真的想使用 cellPadding 属性，请注意，如果您使用像素值，则只能以这种方式设置统一填充，因为它只接受单个值。