Question

我有一个带有html表的简单html页面。我已经编译了代码，以表格格式显示实时搜索结果。我只是想知道是否可以在单独的框中显示表格数据？喜欢表格吗？我的html表中有11列，其中很少有很长的数据，因此文本换行看起来很丑。

请指导我如何过滤数据并将其显示在可滚动的框而不是普通表格中。

这是我的代码。

  function myFunction1() {
      var input, filter, table, tr, td, i;
      input = document.getElementById("myInput1");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
    	 }
        }       
      }
    }
    
    
 
 function myFunction2() {
      var input, filter, table, tr, td, i;
      input = document.getElementById("myInput2");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[1];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
    	 }
        }       
      }
    }

* {
      box-sizing: border-box;
    }
    
    #myTable tbody {
        height: 600px;
        display: inline-block;
        width: 100%;
        overflow: auto;
    	
    }
    	
    #myInput1 {
      background-image: url("res/searchicon.png");
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 26%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    #myInput2 {
      background-image: url("res/searchicon.png");
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 26%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    
    #myTable {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ddd;
      font: 15px arial, sans-serif;	
    }
    
    tr:nth-child(even) {
        background-color: #eff1f4;
    }
    #myTable th, #myTable td {
      table-layout: fixed;
      text-align: left;
      padding: 10px;
      width: 100%;
    }
    
    #myTable tr {
      border-bottom: 1px solid #ddd;
    }
    
    #myTable tr.header, #myTable tr:hover {
      background-color: #DEC4BC;
    }
    
    
    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

<!DOCTYPE html>
    <html>
    <head>
 
    </head>
    <body>
    <img src="res/eGo.png" style="width:250px;height:150px;">
    
    <h2><font face="Arial" color="#c11919">eGO Web</font></h2>
    
    <input type="text" id="myInput1" onkeyup="myFunction1()" placeholder="Search for customer names" title="Type in a customer name">
    <input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Search for Customer Number" title="Type in a Customer Number">
    <br>
    <font size="2"face="Arial" color="#c11919">last updated on - July 2019</font>
    <br>
    <br>
    
    <table id="myTable" style="display:visible;">
      <tr class="header">
    
        <th style="width:10%; ">Customer Name</th>
    	<th style="width:10%;">Account Number</th>
    	<th style="width:10%;">Collector Name</th>
    	<th style="width:10%;">Statement Email</th>
    	<th style="width:10%;">Customer Contacts</th>
    	<th style="width:10%;">Internal Contacts</th>
    	<th style="width:10%;">3rd Party Payments</th>
    	<th style="width:10%;">Remarks/ Customer Profile</th>
    	<th style="width:10%;">Historical Activities</th>
    	<th style="width:10%;">Portal/ Invoicing Method</th>
    	<th style="width:10%;">Statement Required</th>
      </tr>
    
    <--! Here is table data -->
    
    </table>
    <br>
    <font size="1"face="Arial" color="#c11919">To report issues <a href="mailto:pratik.kumar@company.com?Subject=Issue%20in%20Collector%20lookup%20tool%20" target="_top">Click Here</a> or send email to pratik.kumar@company.com</font>
   
    
    </body>
    </html>

Answer 1

作为答案写，尚待评论。您可以设置以下样式：

AdminHomeComponent

这将允许在文本溢出或超出框的指定大小时在表格的单元格中滚动。

更多有关溢出的信息：https://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

是的，表格单元格可以包含其他元素，并且您可以将尺寸有限的div插入其中并设置溢出以进行滚动。例如：

<table>
  <tr>
    <td>One cell</td>
    <td>second cell
      <div style="width: 100px; height: 100px; overflow: auto">
        very long text goex here and scroll bar will appear
        very long text goex here and scroll bar will appear
        very long text goex here and scroll bar will appearvery long text goex here and scroll bar will appear
        very long text goex here and scroll bar will appear
      </div>
    </td>
    <td>Third cell</td>
  </tr>
</table>

在单独的框中显示html表内容

2 个答案: