2015-09-30 24 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

谢谢!我知道我错过了一些简单的事情。 :) –