(전에 한 번 나온 질문이랑 같은내용.)

http://www.umgrim.com/custom/test.htm

여기서 test 페이지 보시면,

(스크롤해서 아래쪽까지 보시고,)

위에 테이블이 제가 원하는 레이아웃이거든요. (가운데 셀 안의 내용이 짧을때)

바로 아래 테이블은 자꾸 에러나는 테이블이구요.




그런데 가운데  셀(파랑색 부분)이 내용이 길어지면 테이블이 아래로 늘어나요.,

양 사이드의 회색 B1 부분은 높이가 고정되야 하는데, 높이 지정하고, 빨간색 C1은 높이 지정 안했구요.

엉뚱하게 고정높이 지정한 회색부분 B1이 늘어나네요. 빨간색 부분이 늘어나야 하는데...

소스코드는 아래와 같습니다.

<table width="100%" height="100%" border="1" cellspacing="0" bordercolorlight="black" bordercolordark="white" style='table-layout:fixed;'+ '+ '>
  <tr>
    <td width="100" height="100" bgcolor="#CCCCCC">B1</td>
    <td rowspan="2" bgcolor="#66CCFF">A</td>
    <td width="100" height="100" bgcolor="#CCCCCC">B2</td>
  </tr>
  <tr>
    <td width="100" bgcolor="red">C1</td>
    <td width="100" bgcolor="red">C2</td>
  </tr>
</table>

<!--밑에 있는 늘어난 테이블 소스-->

<table width="100%" height="100%" border="1" cellspacing="0" bordercolorlight="black" bordercolordark="white" style='table-layout:fixed;'+ '>
    <tr>
        <td width="100" height="200" bgcolor="#CCCCCC">B1</td>
        <td rowspan="2" bgcolor="#66CCFF"><p>A</p>
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
          <p>6</p>
          <p>7</p>
          <p>8</p>
          <p>9</p>
          <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p> </p></td>
        <td width="100" height="200" bgcolor="#CCCCCC">B2</td>
    </tr>
    <tr>
        <td width="100" bgcolor="red">C1</td>
        <td width="100" bgcolor="red">C2</td>
    </tr>
</table>


아시는 분들의 답변 좀 기다리겠습니다.