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

Question

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

所以我需要的是HTML表格单元格内的可滚动列表。

down vote unaccept您可以在从服务器获取数据后删除行

$.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);
            }

        }

    });

和CSS：

.cellDiv {
  height: 30px;
  text-align: left;
  vertical-align: top;
  width: 10%;

  font-family: Monaco;
  font-size: larger;

  background-color: whitesmoke;
}

.listSrollable {
  width:20%;
  overflow-y: scroll;
  overflow: hidden;

  font-family: Monaco;

  background-color: white;
}

整个代码很大，可以复制所有内容，但关键部分就在这里。 所以我猜测问题是单元格和可滚动列表的样式冲突，但不确定如何修复。

Answer 1

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

Answer 2

使用overflow-y: scroll在<td>上overflow-y: scroll （或auto ）并根据此模式指定min-height/width ：

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;
}

注意：表的默认行为是为了符合其内容的高度，并且在内容超出容器的边框或可见限制的情况下使用滚动。 因此，当您想要控制<td>的高度时，在其中放置一个块元素并改为控制块元素。

SNIPPET

 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; } 

 <table> <tbody> <tr> <td> <ol>&nbsp;</ol> </td> <td> <ol>&nbsp;</ol> </td> <td> <ol> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> </ol> </td> </tr> <tr> <td> <ol>&nbsp;</ol> </td> <td> <ol> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> </ol> </td> <td> <ol>&nbsp;</ol> </td> </tr> <tr> <td> <ol> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> <li>CONTENT</li> </ol> </td> <td> <ol>&nbsp;</ol> </td> <td> <ol>&nbsp;</ol> </td> </tr> <tr> <td> <ol>&nbsp;</ol> </td> <td> <ol>&nbsp;</ol> </td> <td> <ol>&nbsp;</ol> </td> </tr> </tbody> </table>