overflow-x：auto不工作

Question

我有以下CSS和HTML代码：

#container {
  display: table;
  margin: 0 auto;
}
.table-container {
  width: 100%;
  overflow-x: auto;
  _overflow: auto;
}

<div id='container'>
  <div class='table-container'>
    <table>
      <tr>
        <th>Example</th>
      </tr>
      <tr>
        <td>blablablablablablablablablablablablablablablablablablablablablablablablabla</td>
      </tr>
    </table>
  </div>
</div>

我的问题是overflow-x: auto由于主容器中的display: table而无效。我需要保留display: table属性，因为我希望容器div宽度与其中的内容相同。如何使用display：table in main container？

保持溢出工作

Answer 1

这是你要找的东西吗？

编辑：我认为你的问题是身高。您必须根据您的内容手动指定它。如果您知道内容是什么，则可以指定，如果不是，则必须使用javascript

    .container {
        display: table;
        width : 100%;
        position: relative;
    }
    .table-container {
        position : absolute;
        left: 0;
        right:0;
        overflow-y: auto;

    }
    #scroller{
        height:100px;
       
    }

<div class='container' id="scroller">
    <div class='table-container'>
        <table>
            <tr>
                <th>Example</th>
            </tr>
            <tr>
                <td>blablablablablablablablablablablablablablablablablablablablablablablablabla</td>
            </tr>
        </table>
    </div>
</div>

<div class='container'>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."


    </p>
</div>