我的 table 根本没有溢出 div

Question

在开始我的问题之前，我想让您知道我已经反复搜索过这个问题。关于如何使我的 table 溢出 div 而没有结果，我发现了许多不同的答案。问题是我的 table 根本不会溢出，即使它在某些情况下显示滚动条（我使用过的一些其他代码）。 div 的宽度始终为 100%。如果我增加一列的宽度，它只会调整其余列的大小。所以我希望你告诉我我做错了什么，如果你有任何建议。谢谢大家。

您可以在此处查看完整的 table：http://codepen.io/mariomez/pen/XJqwYy

<div class="scrollit">

<table class="qwe3" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="8" class="qwe1">title</td>
  </tr>
  <tr class="qwe2">
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
  </tr>
  <tr>
    <td>1</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>2</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>3</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>4</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>5</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>6</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>7</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>8</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>9</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>10</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>
</div>

CSS（滚动条在底部）

.qwe1 { background:#202B39; border-radius:5px 5px 0px 0px; height:40px; font-size:20px; color:#FFF; font-weight: 300; text-align:center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align:middle; }

.qwe2 { 
 color:#202B39;
 background:#56c9d6; 
 font-size:13px; font-weight: 400; 
 text-align:center; 
 vertical-align:middle; 
}

qwe3 {table-layout:fixed;
overflow:"hidden";
}

.scrollit {overflow:auto;}

Answer 1

将 min-width 和 max-width 添加到 <td> 似乎可以修复它。

我创建了一个简单的演示 http://jsfiddle.net/1yjbnfxn/2/

HTML

<div>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>
</div>

CSS

div {
    border: 1px solid red;
    overflow: auto;
}
table {
    border-collapse: collapse;
}
td {
    border: 1px solid blue;
    min-width: 200px;
    max-width: 200px;
}

Answer 2

使您的 Table 具有绝对位置..并添加一个具有相对位置的包装器以及溢出自动...它应该可以解决问题

我的 table 根本没有溢出 div

my table doesn't overflow div at all

html

css

scroll

overflow