自动溢出溢出-x;隐藏的隔断桌

时间：2018-10-26 16:11:31

标签： html css

我知道这个问题曾经被问过，但是我找不到能够解决我的特定问题的解决方案。

在此链接中，W3C规范说：

  

'overflow-x'和'overflow-y'的计算值与它们的指定值相同，不同之处在于某些与'visible'的组合是不可能的：如果一个指定为'visible'，而另一个指定为'visible' “滚动”或“自动”，然后将“可见”设置为“自动”。如果“ overflow-y”相同，则“ overflow”的计算值等于“ overflow-x”的计算值；否则为“ overflow-x”和“ overflow-y”的计算值对。

我正在尝试创建一个包含2个表的div。我希望此div（两个表）一起水平滚动，而仅底部网格垂直滚动。看来，通过添加overflow-y，它会自动创建设置为“自动”的overflow-x和/或当我添加overflow-x：隐藏网格时，将其切碎。

这是我的fiddle 

overflow-y: auto;
overflow-x: hidden;

摘要：

当水平滚动顶部（蓝色）表格时，它给了我所需的操作，但切断了底部（红色）表格。 底部表格的垂直滚动可按需工作，但缺少内容。

此css-tricks link有助于解释我在不同位置使用可能的“骇客”解决方案时遇到的问题。

如何阻止底部桌子切断桌子？ TIA！

2 个答案:

答案 0 :(得分：0)

我建议您将position:sticky;用于toptable容器。

检查以下代码段：

.toptable-container{
  position:sticky;
  position: -webkit-sticky;
  top:0;
  z-index: 1;
  background-color: white;
}

.topTable {
  border: 1px solid blue;
  }

.topTable th {
  min-width: 70px;
}

.topTable td {
  min-width: 70px;
}

.bottomTable {
  border: 1px solid red;
}

.bottomTable th {
  min-width: 70px;
}

.bottomTable td {
  min-width: 70px;
  
}

tr:nth-child(odd) {background-color: #f2f2f2;}

.bottomTable tr {
  height: 50px;
}
<div style="height: 250px; width: 500px; border: 0px solid red; overflow-x: scroll;">
  <div class="toptable-container">
    <table class="topTable">
      <tr>
        <th>Image</th>
        <td>
          <img src="http://image.trucktrend.com/f/8488927+w128+h128+re0+cr1+ar0/0804tr-01-ps%2B1951-ford-f1-pickup%2Bleft-side.jpg" height="60">
        </td>
        <td>
          <img src="http://image.trucktrend.com/f/39533463+w128+h128+re0+cr1+ar0/1202tr-01%2B1951-ford-f100-the-forgotten-one%2Bside-view.jpg" height="60">
        </td>
        <td>
          <img src="https://lh3.googleusercontent.com/g_Kibfl6m4TyprRD5HQSy9qMPXqfUNvE-g3jmb_GPshEydWyNSYyDWEp6ViAovomc_B9F3kJBQ=w128-h128-n-no-v1" height="60">
        </td>
        <td>
          <img src="http://image.trucktrend.com/f/70429704+w128+h128+re0+cr1+ar0/1951-chevrolet-3100-front-three-quarters.jpg" height="60"></td>
        <td>
          <img src="http://image.trucktrend.com/f/100935933+w128+h128+re0+cr1+ar0/024-1960-ford-f-100-caterpillar-diesel-engine-swap-rat-rod-pickup-patina-paint-job-side-view.jpg" height="60"></td>
        <td>
          <img src="https://lh3.googleusercontent.com/g_Kibfl6m4TyprRD5HQSy9qMPXqfUNvE-g3jmb_GPshEydWyNSYyDWEp6ViAovomc_B9F3kJBQ=w128-h128-n-no-v1" height="60"></td>
        <td>
          <img src="http://image.trucktrend.com/f/8488927+w128+h128+re0+cr1+ar0/0804tr-01-ps%2B1951-ford-f1-pickup%2Bleft-side.jpg" height="60">
        </td>
        <td>
          <img src="http://image.trucktrend.com/f/100935933+w128+h128+re0+cr1+ar0/024-1960-ford-f-100-caterpillar-diesel-engine-swap-rat-rod-pickup-patina-paint-job-side-view.jpg" height="60"></td>
        <td>
            <img src="http://image.trucktrend.com/f/70429704+w128+h128+re0+cr1+ar0/1951-chevrolet-3100-front-three-quarters.jpg" height="60">
        </td>
      </tr>
    </table>
  </div>
  <div style="">
    <table class="bottomTable" style="overflow-y: auto; overflow-x: hidden; position: relative; height: 150px;">
      <tr>
        <th>
          Year
        </th>
        <td>1949</td>
        <td>1950</td>
        <td>1951</td>
        <td>1951</td>
        <td>1955</td>
        <td>1951</td>
        <td>1949</td>
        <td>1955</td>
        <td>1951</td>
      </tr>
      <tr>
        <th>
          Color
        </th>
        <td>Black</td>
        <td>Red</td>
        <td>Yellow</td>
        <td>Silver</td>
        <td>Patina</td>
        <td>Yellow</td>
        <td>Black</td>
        <td>Patina</td>
        <td>Silver</td>
      </tr>
      <tr>
        <th>
          Trans
        </th>
        <td>Auto</td>
        <td>Auto</td>
        <td>Manual</td>
        <td>Auto</td>
        <td>Manual</td>
        <td>Manual</td>
        <td>Auto</td>
        <td>Manual</td>
        <td>Auto</td>
      </tr>
      <tr>
        <th>
          Wheel
        </th>
        <td>18</td>
        <td>20</td>
        <td>20</td>
        <td>19</td>
        <td>21</td>
        <td>20</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
      </tr>
       <tr>
        <th>
          Bed length
        </th>
        <td>6</td>
        <td>6</td>
        <td>8</td>
        <td>8</td>
        <td>6</td>
        <td>8</td>
        <td>6</td>
        <td>8</td>
        <td>8</td>
      </tr>     
    </table>
  </div>
</div>

您也可以here对其进行测试

答案 1 :(得分：0)

从顶部和底部的包装开始：

element.style {
    height: 250px;
    width: 500px;
    border: 0px solid red;
    overflow-x: scroll;
}
  • 具有固定的宽度和高度
  • 其溢出-x设置为滚动
  • 因此它的溢出-y将自动设置为auto

里面有两个子div。

  • 第一个没有设置规则，因此它会在受限制的父级滚动到500px之后继续运行
  • 第二个没有设置宽度，它作为一个块继承其父对象的宽度，并根据您设置的溢出规则将继承的500px之后的内容视为隐藏

解决方案 

.wrapper {
  height: 250px;
  width: 500px;
  position: relative;
}
.container1 {
  position: sticky;
  position: -webkit-sticky;
  border: 1px solid blue;
  top:0;
  left:0;
}

.topTable th {
  min-width: 70px;
}

.topTable td {
  min-width: 70px;
}

.bottomTable {
  border: 1px solid red;
}

.bottomTable th {
  min-width: 70px;
}

.bottomTable td {
  min-width: 70px;
  
}

tr:nth-child(odd) {background-color: #f2f2f2;}

.bottomTable tr {
  height: 50px;
}
<div class="wrapper" style="overflow-x: scroll;">
  <div class="container1">
    <table class="topTable">
      <tr>
        <th>Image</th>
        <td>
          <img src="http://image.trucktrend.com/f/8488927+w128+h128+re0+cr1+ar0/0804tr-01-ps%2B1951-ford-f1-pickup%2Bleft-side.jpg" height="60">
        </td>
        <td>
          <img src="http://image.trucktrend.com/f/39533463+w128+h128+re0+cr1+ar0/1202tr-01%2B1951-ford-f100-the-forgotten-one%2Bside-view.jpg" height="60">
        </td>
        <td>
          <img src="https://lh3.googleusercontent.com/g_Kibfl6m4TyprRD5HQSy9qMPXqfUNvE-g3jmb_GPshEydWyNSYyDWEp6ViAovomc_B9F3kJBQ=w128-h128-n-no-v1" height="60">
        </td>
        <td>
          <img src="http://image.trucktrend.com/f/70429704+w128+h128+re0+cr1+ar0/1951-chevrolet-3100-front-three-quarters.jpg" height="60"></td>
        <td>
          <img src="http://image.trucktrend.com/f/100935933+w128+h128+re0+cr1+ar0/024-1960-ford-f-100-caterpillar-diesel-engine-swap-rat-rod-pickup-patina-paint-job-side-view.jpg" height="60"></td>
        <td>
          <img src="https://lh3.googleusercontent.com/g_Kibfl6m4TyprRD5HQSy9qMPXqfUNvE-g3jmb_GPshEydWyNSYyDWEp6ViAovomc_B9F3kJBQ=w128-h128-n-no-v1" height="60"></td>
        <td>
          <img src="http://image.trucktrend.com/f/8488927+w128+h128+re0+cr1+ar0/0804tr-01-ps%2B1951-ford-f1-pickup%2Bleft-side.jpg" height="60">
        </td>
        <td>
          <img src="http://image.trucktrend.com/f/100935933+w128+h128+re0+cr1+ar0/024-1960-ford-f-100-caterpillar-diesel-engine-swap-rat-rod-pickup-patina-paint-job-side-view.jpg" height="60"></td>
        <td>
            <img src="http://image.trucktrend.com/f/70429704+w128+h128+re0+cr1+ar0/1951-chevrolet-3100-front-three-quarters.jpg" height="60">
        </td>
      </tr>
    </table>
  </div>
  <div class="container2">
    <table class="bottomTable">
      <tr>
        <th>
          Year
        </th>
        <td>1949</td>
        <td>1950</td>
        <td>1951</td>
        <td>1951</td>
        <td>1955</td>
        <td>1951</td>
        <td>1949</td>
        <td>1955</td>
        <td>1951</td>
      </tr>
      <tr>
        <th>
          Color
        </th>
        <td>Black</td>
        <td>Red</td>
        <td>Yellow</td>
        <td>Silver</td>
        <td>Patina</td>
        <td>Yellow</td>
        <td>Black</td>
        <td>Patina</td>
        <td>Silver</td>
      </tr>
      <tr>
        <th>
          Trans
        </th>
        <td>Auto</td>
        <td>Auto</td>
        <td>Manual</td>
        <td>Auto</td>
        <td>Manual</td>
        <td>Manual</td>
        <td>Auto</td>
        <td>Manual</td>
        <td>Auto</td>
      </tr>
      <tr>
        <th>
          Wheel
        </th>
        <td>18</td>
        <td>20</td>
        <td>20</td>
        <td>19</td>
        <td>21</td>
        <td>20</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
      </tr>
       <tr>
        <th>
          Bed length
        </th>
        <td>6</td>
        <td>6</td>
        <td>8</td>
        <td>8</td>
        <td>6</td>
        <td>8</td>
        <td>6</td>
        <td>8</td>
        <td>8</td>
      </tr>     
    </table>
  </div>
</div>

位置粘性是您要寻找的设计的方法

相关问题
最新问题