0

テーブルの内容をテーブルのサイズに合わせる方法を探しています。たとえば、幅と高さが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;

?>
4

2 に答える 2

2

表のセルに境界線を追加するときは注意してください。現在の幅/高さに 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;

?>
于 2012-08-14T21:32:48.687 に答える
0

私があなたを正しく理解していれば、独自のロジックでテーブルのサイズを管理したいと考えています。テーブルのセル内のコンテンツが何らかの理由でオーバーフローした場合、それを大きくしたくありません。その場合、静的のままにしたい場合は、この属性を追加してみてください

table
{
   table-layout:fixed;
}
于 2012-08-14T20:01:42.090 に答える