内容如何适应表格大小

Question

我正在寻找一种使表格内容适合表格大小的方法。 例如，我有宽度和高度 = 100 的表格，以及 5 列和 5 行，如果行或列更改为 20，则只有内容重新调整大小以适应旧表格大小。 我写了一些代码， 但如果行或列发生变化，它会调整表格大小！

<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。 当您将表格宽度除以列/行数时使用 floor()，因为宽度和高度属性不接受分数。

而且似乎高度属性不准确（不知道为什么）。

您还必须考虑文字大小。例如我把：

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;
}