如何配合内容表的大小

Question

我在寻找一种方法来适应表内容，以表大小 例如我有宽度和高度= 100，和5栏和第5行的表中，如果行或COL变化至20只有内容重新调整大小以适应旧桌子大小。 我写了一些代码： 但它reszie表如果行或列更改！

<style> 
.tbl { 
    max-width: 100px; 
    max-height: 100px; 
    height: 100px; 
    width: 100px; 
    border: 1px solid #333; 
} 
.blck { 
    border: 1px solid #0F3; 
    background:#F00;  
} 
.wht { 
    border: 1px solid #0F3; 
    background:#069; 
} 
</style> 
<?php 
$w = 15; 
$h = 15; 
$max = 100; 

if ($w>=$h) { 
    $cell = ($max/$w); 
} else { 
    $cell = ($max/$h); 
} 
$clr = 0; 
$tbl .= '<table width="'.$max.'px" align="center" border="0" height="'.$max.'px" class="tbl">'; 
for ($r=1;$r<=$h;$r++){ 

$tbl .= '<tr>'; 
    for($c=1;$c<=$w;$c++){ 
     if($clr == '0'){ 
      $tbl .= '<td width="'.$cell.'%" height="'.$cell.'%" class="blck"></td>'; 
      $clr = 1; 
     } else { 
      $tbl .= '<td width="'.$cell.'%" height="'.$cell.'%" class="wht"></td>'; 
      $clr = 0; 
     } 
    } 
$tbl .= '</tr>'; 
} 

$tbl .= '</table>'; 

echo $tbl; 

?> 

Answer 1

的时候要小心添加边框的表格单元格，因为它会增加2px的当前的宽度/高度。 由于宽度和高度属性不接受分数，所以在将表格宽度除以cols/rows计数时使用floor（）。

它似乎height属性是不准确的（不知道为什么）。

你也必须考虑文字大小。比如我放：

font-size: 1px; 
line-height: 1px; 

检查了这一点：

<?php 
$w = 30; 
$h = 30; 
$max = 100; 

if ($w>=$h) { 
    $cell = floor($max/$w); 
} else { 
    $cell = floor($max/$h); 
} 
?> 
<style type="text/css"> 
.tbl { 
    display: table; 
    height: <?php echo ($cell*$h); ?>px; 
    width: <?php echo ($cell*$w); ?>px; 
    font-size: 1px; 
    line-height: 1px; 
} 
.blck { 
    background-color: #F00; 
} 
.wht { 
    background-color: #069; 
} 

.tbl .tr { 
    display: table-row; 
} 

.tbl .td { 
    width: <?php echo $cell;?>px; 
    height: <?php echo $cell;?>px; 
    display: table-cell; 
} 
</style> 
<?php 

$fcell = $clr = 0; 
$tbl .= '<div class="tbl">'; 
for ($r=1;$r<=$h;$r++){ 
    $tbl .= '<div class="tr">'; 
     for($c=1;$c<=$w;$c++){ 
      if($clr == '0'){ 
       $tbl .= '<div class="td blck">&nbsp;</div>'; 
       $clr = 1; 
      } else { 
       $tbl .= '<div class="td wht">&nbsp;</div>'; 
       $clr = 0; 
      } 
     } 
    $tbl .= '</div>'; 

    if ($fcell == 0){ 
     $fcell = $clr = 1; 
    } else { 
     $fcell = $clr = 0; 
    } 
} 

$tbl .= '</div>'; 

echo $tbl; 

?> 

Answer 2

如果我正确地理解了你，你想按自己的逻辑管理表的大小。 如果表格单元格中的任何内容由于某种原因而溢出，则不希望它增长。你想让它留静态在这种情况下尝试添加该属性

table 
{ 
    table-layout:fixed; 
}