6

同じ幅と高さのすべての行に異なるセル数のテーブルを作成することは可能ですか..?? もしそうなら、それをより簡単な方法でどのように行うことができますか.. ???

ノート：

  1. 行の幅と高さは同じです

  2. セル幅は行ごとに異なります

    <table>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td colspan="3">&nbsp;</td>
</tr>

    これは私がcollspanを使用して試したものです..ここで、最初の行のセルの幅が30px、30px、30pxであるとしましょう。coll spanを使用すると、60px、30pxのようになりますが、セルが2つしかない50px、40pxにします。

こんな感じで欲しいここに画像の説明を入力してください

4

5 に答える 5

21

colspan複数の列にまたがるセルを作成するために使用できます。

jsFiddle

ここに画像の説明を入力してください

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="3">&nbsp;</td>
    </tr>
</table>

すべてを同じ幅と高さにしたいが、セルの数だけが異なる場合は、の特定のセルのスタイルを設定することはできません<table>。

jsFiddle

ここに画像の説明を入力してください

<table>
    <tr>
        <td class="content">&nbsp;</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td></td>
    </tr>
    <tr>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
    </tr>
</table>

アップデート

画像を使用した更新。はい、次を使用してこれを実行できますcolspan。

jsFiddle

ここに画像の説明を入力してください

<table>
    <tr>
        <td>&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
    </tr>
</table>

これは4つの列を使用し、真ん中の2つは他の列よりも小さいです。これは、列がどのように設定されているかを示す画像です。

ここに画像の説明を入力してください

アップデート＃2

これは、よりランダムなサイズのセルの例です。最初の行は10％、90％、2番目の行は55％、45％です。

jsFiddle

ここに画像の説明を入力してください

HTML

<table>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
</table>

CSS

table {
    width:100px;
}
td {
    border: 1px solid #000;
    height:1em;
}
tr:first-child td:first-child {
    width:10%;
}
tr:first-child td:last-child {
    width:90%;
}
tr:last-child td:first-child {
    width:55%;
}
tr:last-child td:last-child {
    width:45%;
}
于 2013-03-27T11:59:26.383 に答える
2

はい、次colspanのようにテーブルセルの属性を使用できます。

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>

    <tr>
        <td>1</td>
        <td colspan="2">2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>

     <tr>
        <td>1</td>
        <td colspan="5">2</td>
    </tr>

    <tr>
        <td colspan="2">1</td>
        <td>2</td>
        <td colspan="2">3</td>
        <td>4</td>
    </tr>
</table>

実例： http： //jsfiddle.net/sk5cB/

于 2013-03-27T12:01:35.733 に答える
0

これがあなたが探しているものであるということは肯定的ではありませんが、タグのcolspan属性を使用することで、セルがマージされたテーブルを作成できます。<td>

HTMLcolspan属性

于 2013-03-27T12:02:00.577 に答える
0

でテーブルを使用および作成することもできます

    <tr> </tr> tags
于 2013-03-27T12:22:12.257 に答える
0

これらのセルにコンテンツを挿入し、同じセル幅を維持したい場合は、テーブルのみを使用することはできません。この問題の解決策も探しました。彼の例で示したDanielImmsのようにセルが空の場合は見栄えがしますが、これらのセルにコンテンツを追加すると、幅が大きくなり、行の他のセルが大きくなり始めます。小さい。table-layout：fixedを指定しても、最初の行が後続のすべての行のルールになるため、役に立ちません。

Bootstrap 3がグリッドシステムで行うように、左フロートと幅がパーセンテージで明確に修正されたdisplay：table divを使用する可能性がある場合は、はるかに信頼性が高くなります。

于 2014-08-21T13:09:08.127 に答える