使用css的表格单元格内的可滚动div

我希望能够在div上设置最大宽度并使用滚动条处理溢出。这在FF工作，但不是在IE浏览器或铬，所以很好...滚动部分似乎工作正常，但表中的宽度不会像FF中那样调整，宽度仍然占可滚动的div铬和IE。 FF主桌完美调整。我知道你不应该使用<div>一个<span>等里面，只是想如何做到这一点的想法溢出...使用css的表格单元格内的可滚动div

jsFiddle

这是我的例子：

<div>  
    <table style="width: 100%"> 
     <tr> 
      <td>foo</td> 
      <td>bar</td> 
     </tr> 
     <tr> 
      <td colspan="2" class="uiTest"> 
       <span> 
        <div class="uiTableContainer"> 
         <table class="uiTable" cellspacing="0">          <tbody> 
          <tr class="uiTableRow"> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td class="uiTableAction"> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td class="uiTableAction"> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td class="uiTableAction"> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td class="uiTableAction"> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td class="uiTableAction"> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td class="uiTableAction"> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
           <td> 
            foo 
           </td> 
          </tr> 
          </tbody> 
         </table> 
        </div> 
       </span> 
      </td> 
     </tr> 
     <tr> 
      <td>foo</td> 
      <td>bar</td> 
     </tr> 
    </table> 
</div>

而CSS：

.uiTable{ 
    border: 1px solid red; 
    width: 100%; 
} 

.uiTableContainer{ 

    max-width: 200px; 
    overflow: auto; 
}

来源

2011-09-29 Gabe

我不看看问题是什么，在IE9中呈现相同，Chrome 16.0.891 dev和ff 6.0.2 – CBRRacer

没有先生，他们没有。即使内层在IE7，IE8和chrome 14.0.835中具有滚动条，外层表也会拉伸内层的宽度，从而为内层表和视口本身创建滚动条。 – Gabe

你为什么要把一个div放在一个跨度内，完全是这样？如果你想'div'像一个'span'那样使用CSS。 –

是不是必要的，你使用 “最大宽度”？

我在使用“宽度”代替IE时获得了很好的结果。

尝试：http://jsfiddle.net/NCB3a/

测试在IE8和FF6.0.2

编辑：还是要保持最大宽度值，我想这也将工作：

max-width: 200px !important; 
width:200px;

来源

2011-09-29 17:28:28 Andrej

使用css的表格单元格内的可滚动div

回答

相关问题