2

各行のセル数が異なるテーブルを作成しようとしています。

  • 最初の行はヘッダー行です (1 行おきにセルが含まれます)。このヘッダーはテーブルの幅です。

  • 2 行目には 2 つのセルがあります...

  • 3番目には1つのセルがあります...

  • 4番目には4つのセルがあります...

  • 5 番目の最後の行には 3 つのセルがあります。

行がテーブルの全幅にまたがるようにテーブルを設定したい。テーブルが1000pxの場合...

  • ヘッダーの幅は 1000px です

  • 2行目のセルはそれぞれ500pxになります

  • 3行目のセルは1000pxになります

  • 4行目のセルはそれぞれ250pxになります

  • 5 行目のセルは、それぞれ 333px、334px、333px (左から右) になります。

最初の 4 行には colspan を使用できることがわかりましたが、5 行目 (3 セル) には整数以外の値が必要です。5行目のセルは、colspanがないと列を超えて拡張されません...

  • 幅を試す:## CSS コード

  • 各セルの div タグ内

  • td タグ内

  • セル幅を定義する 1 つまたは複数のクラスを作成する

  • div タグの有無にかかわらず、各セルに id を付け、幅を個別に定義する

  • table-layout: オプションの調整

数日後、私は今、ロープの終わりにいます。私が思いつく唯一のことは、colspan がすべて整数値になるように、各行のセル数を意図的に 3 倍にすることです。私が望むようにテーブルをフォーマットするのは不便で不当に難しいように思えます。

これはウェブサイト用のバットマン映画の表です -- HTML/CSS を学ぶために私が構築している練習用ウェブサイトです。私は、HTML を数か月間、CSS を数週間、断続的に使用してきました。

PS: レイアウトには使用されていません。テーブル自体のレイアウトを調整しようとしているだけです。

4

3 に答える 3

1

colspan を使用したテーブルは、最終行以外は問題ありませんか?

最終行の colspaned セル内に 3 つのセルを含む 1 行のテーブルを含めることを検討しましたか?

<table>
    <thead>
        <tr>
           <th colspan="4">
           </th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2"></td>    
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="4"></td>    
        </tr>
        <tr>
            <td></td>    
            <td></td>
            <td></td>    
            <td></td>
        </tr>
        <tr>
            <td colspan="4">
                <table>
                    <tbody>
                       <tr>
                           <td></td>
                           <td></td>
                           <td></td>
                       <tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

内側のテーブルの幅も設定する必要がある場合があります。

于 2012-10-08T21:28:25.957 に答える
0

いくつかのオプションを考えることができます：

1)。テーブルの代わりにネストされた div を使用します。行はすべて同じ幅の div にすることができ、セルは相対的な幅をパーセンテージで指定した div にすることができます。(50%、25%、33%)

    <div class="row"><div class="cell100"></div></div>
    <div class="row"><div class="cell50"></div><div class="cell50"></div></div>
    ...

2)。何らかの理由でテーブルを使用する必要があると思われる場合は、行ごとのすべてのセル数の最小公倍数に一致する列数を持つようにテーブルを指定できます。たとえば、あなたのものは 1、2、3、4 になります。最小公倍数は 12 です。セルが 1 つの行には、colspan が 12 のセルがあります。セルが 2 つの行には、colspan が 6 のセルがあります。セルが 3 つの場合は、次のようになります。それぞれの colspan は 4 です。4 つのセルはそれぞれ colspan が 3 になります。

    <テーブル>
    <tr><td colspan="12">...</td></tr>
    <tr><td colspan="6">...</td><td colspan="6">...</td></tr>
    ...
    <tr><td colspan="3">...</td><td colspan="3">...</td><td colspan="3">...</td></トレ>
    </表>

3)。または、ブートストラップまたは960 グリッド システムまたはその他のグリッド システムで提供されるようなグリッド システムを使用することもできます。

再利用できるので 1 または 3 をお勧めしますが、オプション 2 も機能します。

于 2012-10-08T21:32:22.560 に答える
0

colspanは整数です。特定のセルを拡張して、複数の列を埋めることができます。

例えば：

-------------------------
|        |          |   |
-------------------------
|                   |   |
-------------------------

2 行目の最初のセルにはcolspan="2". width(HTML または CSS のいずれか) を使用して、より絶対的な幅を設定します。

このテーブルの HTML は次のようになります。

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

最初の行が 2 つの列を占めているため、2 番目の行には 2 つのセルしかないことに注意してください。

編集
基本的に、整数が必要です。4 つのセルを含む行と、3 つのセルを含む行があります。したがって、4 行の各セルは、水平方向のスペースの 1/4 を占めます。3 行の各セルは、水平方向のスペースの 1/3 を占めます。次に、これらの分数を同等にする必要があります。

計算のステップを省略します。4 行のcolspanfor each セルは で、33 行の colspan は です4。1colspan列目は… ドラムロールお願いします… 12.

<table>
    <tr>
        <td colspan="12"></td>
    </tr>
    <tr>
        <td colspan="4"></td>
        <td colspan="4"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td colspan="3"></td>
        <td colspan="3"></td>
        <td colspan="3"></td>
    </tr>
</table>

生産する

-------------
|           |
-------------
|   |   |   |
-------------
|  |  |  |  |
-------------
于 2012-10-08T21:17:35.380 に答える