使用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

回答

相關問題