html - 如何动态划分表格(从 div 开始，在其他 div 结束)

Question

我有一张长 table ，我想把它们分成两半。
左侧 div 中的表格开头和右侧 div 中的表格结尾。
我成功划分了2个表

我已经这样做了(以 8 行为例):

<input id="search">
<div class="row">
  <div class=col-lg-6>
    <table id="table-1">
      //4 first row
    </table>
  </div>
  <div class=col-lg-6>
    <table id="table-2">
      //4 end row
    </table>
  </div>
</div>

问题是:当使用搜索栏时，我只显示包含我输入的值的元素。左侧或右侧的某些行可能会被隐藏，但是如果通过我的搜索我得到 4 行我想要左侧 2 行和右侧 2 行。

我真的不知道我该怎么做...
我希望你能明白我说的...
谢谢

Answer 1

我为你创建了一个 fiddle 。请告诉我这是否是您的意思，以便我更新 fiddle :

JsFiddle

基本上，我在两个表格分隔符上使用“float:left”，在父 div 中使用“position:relative”，这样两个表格最终彼此相邻

HTML

<input id="search">
<div class="row">
  <div class="col-lg-6 table-wrapper table-wrapper-1" id="table-wrapper-1">
    <table id="table-1" class="table">
    <tr><td>John Doe</td></tr>
     <tr><td>Maria Thompson</td></tr>
    </table>
  </div>
  <div class="col-lg-6 table-wrapper" id="table-wrapper-2">
    <table id="table-2" class="table">
      <tr><td>Carla Thompson</td></tr>
      <tr><td>Camila Thompson</td></tr>
    </table>
  </div>
</div>

CSS

.table-wrapper {
  float: left;
  width: 50%;
}

.row {
  position: relative;
  width: 100%;
}

#search {
  width: 100%;
}

.table {
  margin-top: 10px;
  width:100%;
  border: 1px solid black;
}