如何让我的搜索栏标题与我的单元格在同一部分中工作？

<div class="container">
  <input type="text" id="search-bar" placeholder="搜索...">
  <table>
    <tr>
      <td>单元格内容1</td>
      <td>单元格内容2</td>
    </tr>
    <tr>
      <td>单元格内容3</td>
      <td>单元格内容4</td>
    </tr>
  </table>
</div>

.container {
  position: relative;
}

#search-bar {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
}

table {
  margin-top: 30px; /* 为了避免搜索栏遮挡表格内容，给表格添加一定的上边距 */
}

const searchBar = document.getElementById('search-bar');
const cells = document.querySelectorAll('td');

searchBar.addEventListener('input', function() {
  const keyword = searchBar.value.toLowerCase();

  cells.forEach(function(cell) {
    const content = cell.textContent.toLowerCase();
    if (content.includes(keyword)) {
      cell.style.display = '';
    } else {
      cell.style.display = 'none';
    }
  });
});