时间戳

首页 > 解决方案 > 溢出-y自动；溢出-x；隐藏切断表

html - 溢出-y自动；溢出-x；隐藏切断表

问题描述

我知道以前有人问过这个问题，但我找不到可以解决我的特定问题的解决方案。

在这个链接中，W3C规范说：

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

我正在尝试创建一个div包含 2 个表的表。我希望这个div（两个表）水平滚动，只有底部网格垂直滚动。似乎通过添加overflow-y，它会自动创建overflow-x设置为 'auto' 和/或当我添加 overflow-x:hidden 时，我的网格会被切碎。

这是我的小提琴

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

总之：

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

这个css-tricks 链接有助于解释我使用不同位置可能的“hacky”解决方案的问题。

如何阻止底部桌子切断我的桌子？蒂亚！

标签： htmlcss

解决方案

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

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

里面有两个子div。

  • 第一个没有设置规则，所以它会在其受限父级滚动 500 像素后继续
  • 第二个没有设置宽度，它继承其父级的宽度作为一个块，并根据您设置的溢出规则将继承的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>

粘性位置是您正在寻找的设计的方式

推荐阅读