CSS column-count 打破了 Chrome 中的表格滚动

Posted

技术标签:

【中文标题】CSS column-count 打破了 Chrome 中的表格滚动【英文标题】：CSS column-count breaks table scrolling in Chrome 【发布时间】：2019-04-08 15:09:46 【问题描述】：

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

问题是如果我滚动然后我看不到所有项目。最后显示的项目是“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>

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于CSS column-count 打破了 Chrome 中的表格滚动的主要内容，如果未能解决你的问题，请参考以下文章

使用 CSS column-count 并不能仅平衡 Chrome 中的内容

CSS3之多列布局

Vue Webpack 构建打破了 Bulma CSS

Chrome 40 是不是打破了 justify-content CSS 覆盖？

页面滚动时 CSS3 动画打破固定定位

CSS - 打破网格元素并在列中拉伸到最宽