2015-09-30 27 views
1

我有一個任意數量的列和行的表格,並且<td>標籤具有高度和寬度。我的問題是,當我把它放在一個<div>溢出:滾動和寬度小於表的寬度,表格單元格被擠壓,即使我有他們指定的寬度。在可滾動的div廣播表格中的寬表格

我做了一堆測試,看起來如果我指定表的寬度,它看起來很好。沒有指定表格寬度就必須有一種CSS方式。

這是我的代碼,用的jsfiddle演示沿着CSS要點(列的數量並不重要,只要它比格

<div class="wrapper"> 
    <table cellspacing="0" cellpadding="0" class="Colors"> 
     <tbody> 
      <tr> 
      <td><td> 
      <td><td> 
      <td><td> 
      <td><td> 
      <td><td> 
      <td><td> 
      <td><td> 
      <td><td> 
     </tbody> 
    </table> 
</div> 

CSS的寬度:

table.Colors td { 
    width:25px; 
    height:25px; 
    font-size:.8em; 
    line-height:25px; 
    border:1px solid #c0c0c0; 
    padding:0; 
    margin:0; 
} 

.wrapper { 
    overflow:scroll; 
    width:300px; 
    height:300px; 
} 

http://jsfiddle.net/nightcatbooks/L7gwwyL4/

+0

對此深感抱歉。鏈接已修復。 –

回答

2

指定的細胞min-width,使他們沒有得到壓扁:

table.Colors td { 
    width:25px; 
    min-width:25px; 

可能無法在舊版瀏覽器上運行(IE7?未測試)

工作小提琴:http://jsfiddle.net/pxth1hph/

+0

謝謝!我知道我錯過了一些簡單的事情。 :) –