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

我在这里有一个使用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;