出于某种原因，我的 tr 边框没有在内部显示，我不知道为什么，也从来没有遇到过问题？它意味着一个动态表，其中可以将 x 和 y 值放在输入中，然后创建它。
html:
<body>
<label id="h">x :</label>
<input type="number" id="width">
<label id="w">y :</label>
<input type="number" id="length">
<input type="submit" id="submit">
<table style="width:40%" id="table">
</table>
<script type="text/javascript" src="TableGenerator.js"></script>
</body>
CSS:
body{
background-color:#929caa;
}
#w{
color:white;
}
#h{
color:white;
}
table{
background-color:#d5dce5 ;
border-collapse: separate;
position: fixed;
margin-top: 10px;
color: black;
}
tr{
border: 1px solid black;
}
JS:(列插入仍在进行中)
var submit = document.getElementById("submit");
submit.addEventListener("click", function(){
InsertNewRow();
InsertNewCol();
})
function InsertNewRow () {
for (var i = 0; i < document.getElementById("width").value; i++) {
var table = document.getElementById ("table");
var row = table.insertRow (-1);
row.className = "row";
row.innerHTML = "New Row";
}}
function InsertNewCol(){
}
最佳答案
tr 边框仅适用于 border-collapse: collapse 而不适用于 separate。所以尝试在 table css
border-collapse 值更改为 collpase
table {
background-color: #d5dce5;
border-collapse: collapse;
position: fixed;
margin-top: 10px;
color: black;
}
tr {
border: 1px solid black;
}<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>关于html - 更改表格行边框查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49794884/