CSS 列数会破坏 Chrome 中的表格滚动

Question

我在页面中使用两列计数。我还使用带有固定标题和滚动的表格。

问题 是如果我滚动然后我看不到所有元素。显示的最后一项是“407...”，但应该是“409...”隐藏(等待滚动)的元素就消失了。我发现问题可能是隐藏的元素呈现到第二列。

我使用 Chrome，但在 Firefox 中可以正常工作。

有谁知道如何解决这个问题？

.two_columns{
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-rule: 1px dashed #015278;
    column-gap: 30px;
    column-fill: balance;
    -moz-column-fill: balance;
}

.two_columns div{
    break-inside: avoid;
    page-break-inside: avoid;
}

.inline{
    display: inline-block;
    width: 100%;
}

.material_window_rel_item{
    cursor: pointer;
    transition: all linear .3s;
}

.material_window_rel_item:hover{
    background-color: #d2d2d2;
}

.material_window_rel_all{
    margin-top: 10px;
    margin-bottom: 10px;
}

.material_window_rel_table{
    width: 100%;
    border-collapse: collapse;
}

.material_window_rel_table tbody{
    max-height: 400px;
    overflow-y: scroll;
    display: block;
}

.material_window_rel_table thead{
    background-color: #015278;
    color: #fff;
    width: 95%;
    text-align: left;
    display: table;
}

.material_window_rel_table thead th{
    padding: 10px 2px 10px 5px;
}

.material_window_rel_table tbody tr{
    display: table;
    width: 99%;
    table-layout: fixed;
    text-align: left;
}

.material_window_rel_table td{
    padding: 8px 0px 7px 10px;
    border-bottom: 1px solid #aaa;
}

<div class="material_window_items two_columns">
   <div class="inline">
      <div class="material_window_rel_all">
         <table class="material_window_rel_table">
            <thead>
               <tr>
                  <th>Calculator</th>
               </tr>
            </thead>
            <tbody>
               <tr class="material_window_rel_item" data-key="1">
                  <td>1 - Etikety</td>
               </tr>
               <tr class="material_window_rel_item" data-key="2">
                  <td>2 - Bookletové Etikety</td>
               </tr>
               <tr class="material_window_rel_item" data-key="3">
                  <td>10 - Etikety</td>
               </tr>
               <tr class="material_window_rel_item" data-key="4">
                  <td>13 - Etikety - Indigo - levnejsi klik</td>
               </tr>
               <tr class="material_window_rel_item" data-key="5">
                  <td>20 - ZH Labels</td>
               </tr>
               <tr class="material_window_rel_item" data-key="6">
                  <td>400 - Skládané Krabičky - Klasické</td>
               </tr>
               <tr class="material_window_rel_item" data-key="7">
                  <td>401 - Skládané Krabičky - Polštářkové</td>
               </tr>
               <tr class="material_window_rel_item" data-key="8">
                  <td>402 - Skládané Krabičky - Speciální</td>
               </tr>
               <tr class="material_window_rel_item" data-key="9">
                  <td>403 - Skládané Krabičky - test</td>
               </tr>
               <tr class="material_window_rel_item" data-key="10">
                  <td>404 - Keskeny - beta</td>
               </tr>
               <tr class="material_window_rel_item" data-key="11">
                  <td>405 - Nelepená skládaná krabička</td>
               </tr>
               <tr class="material_window_rel_item" data-key="12">
                  <td>406 - Krabička s otvorem pro zavěšení</td>
               </tr>
               <tr class="material_window_rel_item" data-key="13">
                  <td>407 - Automatikboden</td>
               </tr>
               <tr class="material_window_rel_item" data-key="14">
                  <td>408 - Krabička s otvorem pro zavěšení a zastrkávacím dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>


   <div>
      <div>
         <span>Enabled</span><br>
         <select name="enabled">
            <option data-id="0">0</option>
            <option data-id="1" selected="selected">1</option>
         </select>
      </div>
      <br><br>
      <input class="save_input" type="button" value="SAVE" name="add_rel">
   </div>
</div>

Answer 1

我没有看到这个问题，但使用 flex 可能会更好，请参阅修正案。

.two_columns{
    /* column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-rule: 1px dashed #015278;
    column-gap: 30px;
    column-fill: balance;
    -moz-column-fill: balance; -- remove this */
   display:flex; /* add this */
}

.two_columns div{
    break-inside: avoid;
    page-break-inside: avoid;
}

.inline{
    /* display: inline-block; -- remove this */
    flex-basis:auto; /* add this */
    /* you may want to set a min and max width */
    width: 100%;
}

.material_window_rel_item{
    cursor: pointer;
    transition: all linear .3s;
}

.material_window_rel_item:hover{
    background-color: #d2d2d2;
}

.material_window_rel_all{
    margin-top: 10px;
    margin-bottom: 10px;
}

.material_window_rel_table{
    width: 100%;
    border-collapse: collapse;
}

.material_window_rel_table tbody{
    max-height: 400px;
    overflow-y: scroll;
    display: block;
}

.material_window_rel_table thead{
    background-color: #015278;
    color: #fff;
    width: 95%;
    text-align: left;
    display: table;
}

.material_window_rel_table thead th{
    padding: 10px 2px 10px 5px;
}

.material_window_rel_table tbody tr{
    display: table;
    width: 99%;
    table-layout: fixed;
    text-align: left;
}

.material_window_rel_table td{
    padding: 8px 0px 7px 10px;
    border-bottom: 1px solid #aaa;
}

<div class="material_window_items two_columns">
   <div class="inline">
      <div class="material_window_rel_all">
         <table class="material_window_rel_table">
            <thead>
               <tr>
                  <th>Calculator</th>
               </tr>
            </thead>
            <tbody>
               <tr class="material_window_rel_item" data-key="1">
                  <td>1 - Etikety</td>
               </tr>
               <tr class="material_window_rel_item" data-key="2">
                  <td>2 - Bookletové Etikety</td>
               </tr>
               <tr class="material_window_rel_item" data-key="3">
                  <td>10 - Etikety</td>
               </tr>
               <tr class="material_window_rel_item" data-key="4">
                  <td>13 - Etikety - Indigo - levnejsi klik</td>
               </tr>
               <tr class="material_window_rel_item" data-key="5">
                  <td>20 - ZH Labels</td>
               </tr>
               <tr class="material_window_rel_item" data-key="6">
                  <td>400 - Skládané Krabičky - Klasické</td>
               </tr>
               <tr class="material_window_rel_item" data-key="7">
                  <td>401 - Skládané Krabičky - Polštářkové</td>
               </tr>
               <tr class="material_window_rel_item" data-key="8">
                  <td>402 - Skládané Krabičky - Speciální</td>
               </tr>
               <tr class="material_window_rel_item" data-key="9">
                  <td>403 - Skládané Krabičky - test</td>
               </tr>
               <tr class="material_window_rel_item" data-key="10">
                  <td>404 - Keskeny - beta</td>
               </tr>
               <tr class="material_window_rel_item" data-key="11">
                  <td>405 - Nelepená skládaná krabička</td>
               </tr>
               <tr class="material_window_rel_item" data-key="12">
                  <td>406 - Krabička s otvorem pro zavěšení</td>
               </tr>
               <tr class="material_window_rel_item" data-key="13">
                  <td>407 - Automatikboden</td>
               </tr>
               <tr class="material_window_rel_item" data-key="14">
                  <td>408 - Krabička s otvorem pro zavěšení a zastrkávacím dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
               <tr class="material_window_rel_item" data-key="15">
                  <td>409 - Krabička s otvorem pro zavěšení a automatickym dnem</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>


   <div> 
      <div>
         <span>Enabled</span><br>
         <select name="enabled">
            <option data-id="0">0</option>
            <option data-id="1" selected="selected">1</option>
         </select>
      </div>
      <br><br>
      <input class="save_input" type="button" value="SAVE" name="add_rel">
   </div>
</div>