How to make the width of the search results same as the HTML table? Please see the code here - https://codepen.io/magic12/pen/ZExKNjY

Problem: When I search the term "test12" versus the term "xyz", the result width differs. I would like to keep the results width consistent all the time. It should be the same size as the table.

    function myFunction() {
      const userInput = document.getElementById("myInput").value.toUpperCase();
      const tableRows = document.querySelectorAll("table tr");
      for (let i = 0; i < tableRows.length; i  ) {
        const rowTextContent = tableRows[i].innerText.toUpperCase();
        tableRows[i].style.display = rowTextContent.toUpperCase().includes(userInput) ? "" : "none";
      }
    }

    table.table_brdr td {
        padding: 8px 10px;
        border: none;
    }
    
    table.table_brdr th {
        background-color: #a6a6a6;
        color: black;
    }
    
    tr:nth-of-type(odd) {
          background-color#D3D3D3;
    }
    
    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 20%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }

    <p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Searche"></p>
    <table  id="myTable">
    <tr>
    <th>Column1</th>
    <th><strong>Column2</th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td></td>
    <td>xyz</td>
    <td>03/30/2017</td>
    </tr>
    
    <tr>
    <td>test12</td>
    <td>https://www.yahoo.com/ </td>
    <td>03/30/2017</td>
    </tr>
      
    <tr>
    <th>Column1</th>
    <th> New Column</th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td>John</td>
    <td>abctd <td>
    <td>09/30/2019</td>
    </tr>
      
    <tr>
    <th>Column1</th>
    <th> New Column2</th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td>Doe</td>
    <td>abctd </td>
    <td>06/30/2019</td>
    </tr>
    
    </tbody></table>

CodePudding user response：

Add width to your <td> in your css. try this code:

td { width: 100px;}