将CSS应用于JavaScript中创建的表-表未定位在正确位置

我的问题是在正确的位置创建了一个新的灰色框，但是从JS代码生成的表位于下方，并且在滚动时显示在页脚上方

我对这部分的CSS是：

#contractTable {
position: relative;
width: 90%;  
margin-left: auto;
margin-right: auto;
text-align: center;  
background-color: #C0C0C0;
border: 1px solid black;
padding-top: 200px;
top: 200px;
}

a） 如何访问css中的表？（由于上面的代码似乎要创建一个新框…）

b） 如何阻止表格在页脚顶部滚动

c） 屏幕上有几条灰线。有人知道这些是从哪里来的吗？我怎样才能摆脱这些

---

jsIDLE:

问题的解决方案-b）：

---

问题是您正在Javascript中创建2个

contractTable

s。以下代码创建一个新表，而不是使用现有表：

var contractTable = document.createElement("TABLE");
contractTable.setAttribute("id", "contractTable");
document.body.appendChild(contractTable);

如果将该代码替换为以下代码：

var contractTable = document.getElementById("contractTable");

然后它将使用现有的表并将您的项目放入其中

c） 屏幕上有几条灰线。有人知道这些是从哪里来的吗？我怎样才能摆脱这些

这些是通过Javascript插入的

标记：

document.body.appendChild(document.createElement('hr'));

由于此代码位于

for

循环中，因此它们实际上被添加了3次。只需删除这一行代码就可以去掉灰色的线条

---

您有id为=“contractTable”的HTML元素，这是一个div，它最初在那里，由您的CSS和正在创建的这个表来设置样式。删除该div。

您的html中有一个id为=“contractTable”的div。然后在html主体的末尾添加一个表

试试这个：

<div id="contractTableContainer"></div>

---

在我看来，所有这些问题都是因为您不理解所使用的代码而导致的。如果你正在使用你发现的代码（例如在互联网上），你应该总是试着去理解它并了解它是如何工作的。这样你就可以避免将来出现类似的问题，并在工作中学习新的东西。下一次，您将不需要使用来自internet的代码，您将能够自己编写代码（这通常会更好）。感谢您提供了这样一个有用的答案。这解决了我所有的问题，但现在文本将不会居中对齐。我正在使用#contractTable td来尝试这一点，但在我的原始代码中，文本对齐在这里和上面都不起作用。你知道这是不是正确的符号吗？我四处阅读，上面也写着try#contractable>td或>tr>td，但没有一个是working@hturner

文本对齐：居中

确实有效，但您的

td

元素不是很大。您需要设置更大的宽度，使其更可见。但是，我刚刚注意到您的

#contractable

是

而不是

。更改此设置并将表的宽度设置为100%会自动增加单元格的宽度并修复此问题。哦，抱歉。我没有查看html中的错误，因此没有注意到这一点。谢谢你指出这一点

<div id="contractTableContainer"></div>

contractTable.setAttribute("id", "contractTable");
ocument.getElementById('contractTableContainer').appendChild(contractTable);