rowspanによるセル結合について

Question

htmlで下記のような横長のカレンダーを作成をしています。

黄色部分を固定し、緑部分を横スクロールするイメージです。

黄色部分について、
2行＋1行の形にしたいのですが、rowspanやcolspanを使ってみてもうまく行かず、下記のようになってしまいます。

黄色部分と緑部分を別テーブルにしていることが原因なのでしょうか？？
それともスタイル指定の問題でしょうか？？
ご教授いただければ幸いです。
よろしくお願いいたします。

下記、現在のソースです。

<div class="calendar-box">
 <div id="x_data_area">
 <!-- 固定したい部分 -->
  <table id="header" class="csTbl_left"> 
   <tbody>
    <tr>
     <td rowspan="2" colspan="1">2020年7月</td>
    </tr>
    <tr></tr>
    <tr><td>印</td></tr>
   </tbody>
  </table>
                
  <!-- スクロールしたい部分 -->
  <div id="data">
   <table class="csTbl">
    <tbody>
     <tr>
      <th>水</th>
      <th>木</th>
      <th>金</th>
      ...
     </tr>
     <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      ...
     </tr>
     <tr class="item">
      <td></td> <!--1-->
      <td>◯</td> <!--2-->
      <td></td> <!--3-->
      ...
     </tr>
    </tbody>
   </table>
  </div>
 </div>
</div>

.calendar-box {
  width:100%; 
  background:#fff; 
  overflow:hidden; 
  display:block; 
  margin-bottom:10px;
}

.csTbl {
  border-collapse:collapse;
  font-size: 13px;
  width: 100%;
  table-layout: fixed
}
.csTbl td, .csTbl th {
  padding:6px; 
  text-align: center;
  width: 20px;
  border-right: 0.5px solid #fff;
}
.csTbl th {
  background:#f2f2f2;
}

.csTbl_left {
  background:#f2f2f2;
  border-collapse:collapse;
  font-size: 13px;
  width: 100%;
  table-layout: fixed
}
.csTbl_left td {
  padding:6px; 
  text-align: center;
  width: 20px;
}

.item td {
  border-right: 0.5px solid #eee
}

#x_data_area {
  position:relative;
}

#header {
  width: 13%;
  position: absolute;
}

#data {
  width:87%;
  position: relative;
  left:13%;
  top:0;
  overflow-x:scroll;
}

Answer 1

単純にセルのheightで調整すればいいのでは。

  <table id="header" class="csTbl_left"> 
   <tbody>
    <tr>
     <th>2020年7月</th>
    </tr>
    <tr><td>印</td></tr>
   </tbody>
  </table>

#header th {
  height: 46px;
  padding: 6px;
}

他に一つのテーブルにして下記の方法もあります。

CSSのposition: stickyでテーブルのヘッダー行・列を固定する - Qiita

Comments

[i-nr]

ありがとうございます。
確かにheightで調整すればいいですね。。
「position: sticky」を使ったものも作ってみます！
ご回答いただきありがとうございました！

Answer 2

黄色部分と緑部分を別テーブルにしていることが原因なのでしょうか？？

そうですね、左側のテーブルにはrowspanを使った行しかないので、高さが余計に取られることはありません。

（テーブルを分けずに、position: stickyを使ってヘッダ固定させるような手段も考えられます）

Comments

[i-nr]

ありがとうございます。
rowspanを使った行しかないと高さが取れないのですね。勉強になりました！
「position: sticky」使ったことがなかったので知りませんでした。
作り直してみます！
ご回答いただきありがとうございました！