javascript - CSS 不适用于表格以及如何在 innerHTML 中关联多个标签

Question

我正在创建一个 div。在 div 中，我想要一个 input 标签，一个 table 标签，它应该是可滚动的，一个 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;

div.innerHTML 我只添加了 myTable。

我的 CSS:

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

我希望我的表格可以滚动。但我的表格 CSS 不适用于表格。 1. 这里我的 css 没有申请 myTable。 2. 如何在表格正下方添加另一个跨度。

Answer 1

不要给表格高度，用CSS overflow-y:auto;将你的表格添加到另一个div里面。