当容器具有 display:block 属性时，overflow-x:auto 停止工作

【问题标题】：Overflow-x:auto stops working when it's container has dispay:block property当容器具有 display:block 属性时，overflow-x:auto 停止工作
【发布时间】：2019-01-09 15:35:30
【问题描述】：

我有两个表嵌套在一个父表中，都在同一个表行中。

我希望第二个表格是可滚动的，而第一个表格是固定的。

没有display: block，第二个表格与第一个重叠，但有display: block，它不再可滚动。

当表格标题/内容较小时，根本没有问题。

这是我的代码：

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  display: block;
  border-collapse: separate;
  border-spacing: 10px;
  *border-collapse: expression('separate', cellSpacing='10px');
}

.test {}

th,
td {
  text-align: left;
  padding: 0px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
<table style="width:100%; table-layout:fixed">
  <tr>
    <td>

      <table>
        <tr>
          <th>Jogger_123</th>
          <th>Sprinter_123</th>
          <th>Swimmer_321</th>
          <th>Dancer_321</th>
          <th>Fisher_567</th>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
      </table>
    </td>

    <td>

      <div style="overflow-x:auto;">
        <table class='test'>
          <tr>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

【问题讨论】：

    标签： css html-table flexbox overflow scrollable


    【解决方案1】：

    您已将表格元素设置为width: 100%。

    但是表格单元格超出了容器的大小。

    所以可以看到第一个td（默认设置为overflow: visible）与第二个td 和容器重叠。

    第二个td 非常适合容器，因为它有overflow-x: auto。

    table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  border-collapse: separate;
  border-spacing: 10px;
}

th,
td {
  text-align: left;
  padding: 0px;
}

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

#table1 {
  border: 2px dashed red;
}

#table2 {
  border: 2px dashed blue;
}
    <table style="width:100%; table-layout:fixed; border: 2px solid black;">
  <tr>
    <td>
      <table id="table1">
        <tr>
          <th>Jogger_123</th>
          <th>Sprinter_123</th>
          <th>Swimmer_321</th>
          <th>Dancer_321</th>
          <th>Fisher_567</th>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
      </table>
    </td>

    <td>

      <div style="overflow-x:auto;">
        <table class='test' id="table2">
          <tr>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

    你需要问自己的问题是你想如何处理第一个td 的溢出。还有overflow-x?

    table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  border-collapse: separate;
  border-spacing: 10px;
}

th,
td {
  text-align: left;
  padding: 0px;
}

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

#table1 { border: 2px dashed red;  }
#table2 { border: 2px dashed blue; }
    <table style="width:100%; table-layout:fixed; border: 2px solid black;">
  <tr>
    <td style="overflow: auto">
      <table id="table1">
        <tr>
          <th>Jogger_123</th>
          <th>Sprinter_123</th>
          <th>Swimmer_321</th>
          <th>Dancer_321</th>
          <th>Fisher_567</th>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
        <tr>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
          <td><input type='text'></td>
        </tr>
      </table>
    </td>

    <td>

      <div style="overflow-x:auto;">
        <table class='test' id="table2">
          <tr>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
          <tr>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
            <td><input type='text'></td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

    【讨论】：

    • 非常感谢您让我以不同的方式思考它，我解决了这个问题。我删除了 100% 的表格宽度，而不是 overflow-x:auto，我做了 overflow-x:scroll 强制浏览器放入滚动条，然后我给它一个宽度，这样滚动条就会真正显示出来。
    猜你喜欢
    • 1970-01-01
    • 2016-02-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-21
    • 2011-12-07
    • 1970-01-01
    • 2017-06-15
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode