滚动使用js创建的表的功能

Scroll functionality for table created created using js

本文关键字：功能 创建 js 滚动      更新时间：2023-09-26

我在这里有一个使用JS动态创建的表，它包含的数据比屏幕显示的要多，所以我需要实现滚动功能，最重要的是我还需要表宽度为100%。有人愿意吗？

var table = $('#mydemo1');
 	        
            for (var i = 0; i <= result.length; i++) 
            {
            	doc1=result[i];
            	                 
                 var tbody = $("<tbody>").appendTo(table);
                 var tr = $("<tr>").appendTo(tbody);
		         var td = $("<td>").html(doc1.Name).data(doc1).appendTo(tr);   
            }
  .mytdemo1 td{font-family:Arial, sans-serif;font-size:14px;padding:10px 7px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:red;color:#444;background-color:#F7FDFA;}
.mytdemo1 td:hover {
	cursor:pointer;
      color: #ccc;
   }
.mytdemo1 th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 7px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:red;color:#fff;background-color:#26ADE4;}
.mytdemo1 .mytdemo1-yw4l{vertical-align:top}
<div class="empl" id="table-scroll"> 
 	
	<table class="mytdemo1" id="mydemo1" style="display:none;"> 
	<thead>
	<tr><th>Employee Name</th></tr>
	</thead>
	
	</table> 
	
	</div>

您应该尝试在表的父元素（可能是div）中设置以下样式：

/* style to table's parent */
overflow: auto;
width: 100%;
max-height: /* your desired height */

表格中的这个样式：

width: inherit;

如果我说得对，你想滚动，而滚动条不会固定在侧面。

用途：

.vertically_scrollable{  
    overflow-x:hidden;
    overflow-y:auto;
}

因为它只会在必要时在顶部显示垂直滚动条。

相关文章：