html - 我的表根本没有溢出 div

Question

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

您可以在此处查看完整表格: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;
}