2

多くの行と列が結合されたテーブル

ベースセルを片側20pxにしたい。次に、«結合されたセル» (rowspan または colspan > 1 の場合) に、それらがカバーする基本セルと同じサイズを持たせたいと考えています。

これを実現するために、結合されたセルの幅を手動で設定しました。ただし、構成によっては、上の図のように奇妙な動作をすることがあります。

青い正方形は 2x2 セルをカバーし、適切なサイズになっています。しかし、緑色の四角形 (および他のすべての大きな四角形) は 5x2 で、隣の四角形 (108 ピクセル) と同じ大きさにする必要があります。

クロムが強制する寸法を破棄するのはなぜですか? （他のブラウザはテストしていません）

ここに jsFiddle があります: http://jsfiddle.net/kjshk/

HTML は次のとおりです。

<table>
    <tbody>
        <tr>
            <td ></td>
            <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td>
        </tr>
        <tr>
            <td  colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td>
            <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td>
        </tr>
        <tr>
            <td ></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td>
            <td  colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td>
        </tr>
    </tbody>
</table>​

編集：jsFiddleをどのように見えるかで更新しましたが、正しいサイズを強制する余分な行があります http://jsfiddle.net/kjshk/11/

edit² : HTML 構造は動的に生成されるため、実際には変更できません (実際、セルを結合するスクリプトがあります)。だから私が行動できるのはスタイルです。

4

2 に答える 2

0

表のセルの幅は、規則ではなく常にガイドラインとして解釈されます。table-layout:fixed規則を施行します。

<table style="table-layout:fixed;">
    <colgroup>
        <col style="width: 20px" span="10" />
    </colgroup>
    <tbody>
        ...
    </tbody>
</table>
于 2012-10-12T15:39:49.440 に答える
0

パーセンテージを変更した場合: これは役に立ちますか?

<table
    <tbody>
        <tr>
            <td ></td>
            <td colspan="9" rowspan="1" style="width: 90%; height: 20px; "></td>
        </tr>
        <tr>
            <td  colspan="8" rowspan="1" style="width: 80%; height: 20px; "></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="7" rowspan="2" style="width: 70%; height: 42px; "></td>
            <td colspan="2" rowspan="2" style="width: 20%; height: 42px; background-color:blue "></td>
        </tr>
        <tr>
            <td ></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2" style="width: 50%; height: 42px; "></td>
            <td  colspan="5" rowspan="2" style="width: 50%; height: 42px; background-color:green "></td>
        </tr>
        <tr></tr>
    </tbody>
</table>

how it should look:
<table>
    <tbody>
        <tr>
            <td ></td>
            <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td>
        </tr>
        <tr>
            <td  colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td>
            <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td>
        </tr>
        <tr>
            <td ></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td>
            <td  colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td>
        </tr>
        <tr></tr>
        <tr>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
        </tr>
    </tbody>
</table>
于 2012-10-12T15:33:42.827 に答える