web-dev-qa-db-ja.com

HTMLテーブルの3行に2つのセルを広げることはできますか？

Rowspan属性を使用して1つのセルを複数の行に広げることができますが、ネストしたテーブルに頼らずに、2つのセルを複数の行に均等に広げることはできますか？

htmltable
4
sanity

このように聞こえるのはあなたが望んでいることです：

+----------+--------------------+
|          |                    |
|          |       row 1        |
|    A     |                    |
|          +--------------------+
|          |                    |
+----------+       row 2        |
|          |                    |
|          +--------------------+
|    B     |                    |
|          |       row 3        |
|          |                    |
+----------+--------------------+

もしそうなら、いや、技術的に言えば、これはHTMLでは不可能です。しかし、それは行をどのように考えているかによるものです。

このテーブルが実際に6行であれば、3行ではなく、rowspansを次のように調整すると機能します。

ここで、rs#はrowspan="#"です

+----------+--------------------+  ------
|          |                    |      <- Row 1  
|          |       rs2          |  ------
|    rs3   |                    |      <- Row 2
|          +--------------------+  ------
|          |                    |      <- Row 3
+----------+       rs2          |  ------
|          |                    |      <- Row 4
|          +--------------------+  ------
|    rs3   |                    |      <- Row 5
|          |       rs2          |  ------
|          |                    |      <- Row 6
+----------+--------------------+  ------
11
scunliffe

承知しました。 rowspanは、使用される列に設定された幅を尊重します。つまり、以下の例の最初の列の幅が200ピクセルの場合、rowspanも幅200ピクセルになります。

<style type="text/css">
    td {border: 1px solid #000;}
</style>
<table>
    <tr>
        <td rowspan="3">This spans two rows but only one row wide</td>
        <td rowspan="3">This spans two rows but only one row wide</td>
        <td>This is one cell wide and high</td>
    </tr>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
    </tr>
</table>

複数の行と列にまたがるセルの例を次に示します

<style type="text/css">
    td {border: 1px solid #000;}
</style>
<table>
    <tr>
        <td rowspan="3" colspan="2">This spans two rows but only one row wide</td>
        <td>This is one cell wide and high</td>
    </tr>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
    </td>
    <tr>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
        <td>This is one cell wide and high</td>
    </tr>
</table>

このページ は古いですが、これがどのようにうまく機能するかをまだ説明しています。

それがあなたが探しているものではない場合、rowspanがあなたが探しているものではない理由をよりよく説明する必要があります。

7
John Conde