5

このデザインを作成するときに、HTML テーブルで問題が発生しました。左側のセルは rowspan="2" セルで、右側の 2 つは height="50%" 属性を使用しています。以下は、予想される動作です。

    +-------------+-----------------+
    | | | | | |
    | | | | 等高 |
    | | | | セル #1 |
    | | | | | |
    | | スケーリング- +-----------------+
    | | 高さセル | | |
    | | | | 等高 |
    | | | | セル #2 |
    | | | | | |
    +-------------+-----------------+

実際に何が起こるか:

    +-------------+-----------------+
    | | | | 等高 |
    | | | | セル #1 |
    | | +-----------------+
    | | | | | |
    | | スケーリング - | | |
    | | 高さセル | 等高 |
    | | | | セル #2 |
    | | | | | |
    | | | | | |
    +-------------+-----------------+

つまり、右側の 2 つのセルの上部をできるだけ小さくし、下部のセルで残りのスペースを埋めます。埋め込みテーブルを使用した醜い回避策がありますが、もっと洗練された解決策があるかどうか疑問に思っていました。これは、左側のセルの高さを固定し、右側のセルのサイズ (ピクセル単位) を強制することによっても回避できます。ただし、これはスケーリング高さセルの目的を無効にします。

4

3 に答える 3

0

height:50% タグを使用するには、テーブルに高さが必要です。繰り返しますが、問題は、左側の要素が任意のサイズになっていることにありました。したがって、左側のテキストが 150 ピクセル未満の場合、固定の高さ (たとえば 150 ピクセル) は問題になる可能性があります。したがって、0px の高さテーブルを設定すると、この問題は解決しました。

<table height="0px" border="1px">
  <tr>
    <td rowspan="2">
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
    </td>
    <td height="50%">
      Text
    </td>
  </tr>
  <tr>
    <td height="50%">
      More text
    </td>
  </tr>
</table>
于 2014-09-29T01:01:18.083 に答える
-1 
<table border=1>
<tr>
<td rowspan="2" style="height:300px;width:100px;text-align:center">First Column</td>
<td style="height: 150px;width:100px;text-align:center">Cell #1</td>
</tr>
<tr>
<td style="height:150px;width:100px;text-align:center">Cell #2</td>
</tr>
</table>
于 2013-04-12T10:44:53.473 に答える