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添加到当前宽度/高度。当您将表格宽度除以cols / rows count时使用floor（），因为width和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;
}

内容与表格大小的匹配程度

2 个答案: