Javascript 在HTML表格单元格中创建可滚动列表

我有一个javascript代码，可以动态地将行附加到HTML表中，并且行中的每个单元格都应该包含一个无序列表。所以通常，我还需要在Javascript中创建一个列表，并将其分配给单元格父级。我这样做了，但出于某种原因，我的列表不可滚动，而且单元格的大小也不是我在CSS中指定的大小。我不确定我做错了什么，如果有人能指出错误，我将不胜感激。这是代码

所以我需要的是HTML表格单元格中的一个可滚动的列表

否决票 不可接受 从服务器获取数据后，可以删除行

$.getJSON("/data/"+data, function(dataState) {

   $("#data_table tr").remove();
       //...

        for(var data in dataState) {


                var row = document.createElement("tr");

               var list = document.createElement("ul");

                            for(var j = 0; j < data.length; j++) {
                                // Create the list item:
                                var item = document.createElement('li');

                                var dataName = data[j].name;

                                // Set its contents:
                                item.appendChild(document.createTextNode(dataName));

                                // Add it to the list:
                                list.appendChild(item);
                            }

                           // make a list scrollable and add to cell
                            cell.appendChild(list);
                            cell.className = "cellDiv";
                            list.className = "listScrollable";

                tableRef.appendChild(row);
            }

        }

    });

---

整个代码太大了，无法全部复制，但关键部分在这里。因此，我猜测问题在于单元格和可滚动列表的样式冲突，但不确定如何修复。

溢出：隐藏覆盖溢出-y。如果使用“自动”而不是“滚动”。滚动条仅在需要时可见

溢出：隐藏覆盖溢出-y。如果使用“自动”而不是“滚动”。滚动条仅在需要时可见

使用

overflow-y：在
上滚动
（或
auto
），并根据此模式分配
最小高度/宽度
：

table {
  border-spacing: 5px;
  border: 1px solid grey;
  height: 400px;
  width: 300px;
}
tr {
  min-height: 100px;
}
td {
  border: 1px solid red;
  overflow-y: scroll;
}
ol {
  min-width: 100px;
  height: 100px;
}

注意：表格的默认行为是符合其内容的高度，当内容超出容器的边界或可见限制时，使用滚动。因此，当您想要控制
的高度时，请在其中放置一个块元素，然后控制块元素

一小条

表格{
边界间距：5px；
边框：1px纯灰；
高度：400px；
宽度：300px；
}
tr{
最小高度：100px；
}
运输署{
边框：1px纯红；
溢出y：滚动；
}
ol{
最小宽度：100px；
高度：100px；
}

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
使用
overflow-y：在
上滚动
（或
自动
），并根据此模式分配
最小高度/宽度
：

table {
  border-spacing: 5px;
  border: 1px solid grey;
  height: 400px;
  width: 300px;
}
tr {
  min-height: 100px;
}
td {
  border: 1px solid red;
  overflow-y: scroll;
}
ol {
  min-width: 100px;
  height: 100px;
}

注意：表格的默认行为是符合其内容的高度，当内容超出容器的边界或可见限制时，使用滚动。因此，当您想要控制
的高度时，请在其中放置一个块元素，然后控制块元素

一小条

表格{
边界间距：5px；
边框：1px纯灰；
高度：400px；
宽度：300px；
}
tr{
最小高度：100px；
}
运输署{
边框：1px纯红；
溢出y：滚动；
}
ol{
最小宽度：100px；
高度：100px；
}

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容