Question

我有一个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);
            }

        }

    });

和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上使用auto（或<td>），并根据此模式指定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>的高度时，请在其中放置一个块元素并控制块元素。

段

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案:

段