Question

出于某种原因，我的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(){

        }

Answer 1

尝试border-collapse: collapse;它会显示行之间的行。

Answer 2

tr边框仅适用于border-collapse: collapse而不适用于separate。因此，请尝试将border-collapse值更改为collpase css

中的table

＆＃13;

table {
  background-color: #d5dce5;
  border-collapse: collapse;
  position: fixed;
  margin-top: 10px;
  color: black;
}

tr {
  border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

＆＃13;

更改表格行边框查询

2 个答案: