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

Posted

技术标签:

【中文标题】当容器具有 display:block 属性时，overflow-x:auto 停止工作【英文标题】：Overflow-x:auto stops working when it's container has dispay:block property 【发布时间】：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>

【问题讨论】：

【参考方案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 强制浏览器放入滚动条，然后我给它一个宽度，这样滚动条就会真正显示出来。

以上是关于当容器具有 display:block 属性时，overflow-x:auto 停止工作的主要内容，如果未能解决你的问题，请参考以下文章

css - 在带有 display:inline-block 的元素上添加垂直空间 [重复]

display属性

display属性

每日分享

行内元素 块级元素 行内块级元素

行内元素 块级元素 行内块级元素