我的桌子根本没有溢出 div答案

【问题标题】：my table doesn't overflow div at all我的桌子根本没有溢出 div
【发布时间】：2015-04-30 14:35:25
【问题描述】：

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

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

【问题讨论】：

听起来您不想在<table> 上设置固定宽度，是这样吗？
hmmm.. 这在我的第一次尝试中起作用，但我担心它在小型设备上看起来不太好.. 这就是我试图避免使用固定值的原因。 :)

标签： html css scroll overflow

【解决方案1】：

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

【讨论】：

【解决方案2】：

将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;
}

【讨论】：