Javascript CSS不适用于表以及如何在HTML中关联多个标记

我正在创建一个

div

。在div内部，我需要一个

input

tagone

table

tag，它应该是可滚动的，一个span用于显示消息

我试图从外部文件中放置css，但由于某些原因它不适用

下面给出了我的创作方法

var input = '<input type="text" id="myInput" onclick="myFunction()" title="Type Input">';
var myTable = '<input type="text" id="myInput" onkeyup="myFunction()" title="Type Table Value">'
    +'<table id="myTable">'+ '<tr class="header"></tr>' + '<tr><td></td></tr>'+'</table>'; 

div.innerHTML = myTable;

我想我的桌子应该是可滚动的。但我的表格css不适用于表格。 1.在这里，我的css没有得到myTable的应用。

---

2.如何在表格下方添加另一个跨度。

不要给出表格高度，使用CSS

overflow-y:auto将表格添加到另一个div中

var div=document.getElementById（“容器”）；
var输入=“”；
var myTable=''+
''+
“标题”+
'内容'+''；
div.innerHTML=myTable
#myTable{
边界塌陷：塌陷；
}
#myTable td，th{
轮廓：1px纯红；
}
#容器{
外形：2倍纯蓝；
高度：30px；
溢出：自动；
}
什么CSS没有被应用？请举例说明您正在尝试做什么。@torazaburo先生，我更新了我的问题。您是否尝试从JS添加此CSS？？任何示例///我可以使用的
var myTable='+'+'+'+'''+'
同时将css添加到
tdiv
overflow-y:auto将代码作为编辑，使其更易于阅读。只需为您编辑的OP留下评论即可。
`#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 30%;
  height : 30%;
  overflow-y:auto;
  border: 1px solid #ddd;
  font-size: 18px;
  display: none;
  margin-top:-12px;
}