tableの高さを保ったままtrの高さを可変としたい

Question

<tr>の高さを可変として、定められた<table>の高さにぴったりそろえるにはどうすればよいでしょうか。 ```html <li class="lesson__item"> 　<h3 class="lesson__week">月</h3> <table class="lesson__table"> <tr> <th> 　<h4 class="lesson__place">A</h4> </th> <th> <h4 class="lesson__place">B</h4> </th> </tr> <tbody> <tr> <td>Aの中身</td> <td>Bの中身</td> </tr> <tr> <td>Aの中身だったりしたり</td> <td>Bの中身がなかったり</td> </tr> 　　　　（同じような<tr>が続きます） <tr> <td>最後のA</td> <td>最後のB</td> </tr> </tbody> </table> </li> <li class="lesson__item"> <h3 class="lesson__week">火</h3> <table class="lesson__table"> 　　　<tr> <th> <h4 class="lesson__place">A</h4> </th> <th> <h4 class="lesson__place">B</h4> </th> </tr> <tbody> <tr> <td>火曜のA</td> <td>火曜のB</td> 　　　　　</tr> <tr> <td>火曜の2時間目のA</td> <td>（Bは何もなかったり）</td> 　　　　　</tr> <tr> <td>火曜のA</td> <td>火曜のB</td> 　　　　　</tr> 　　　　　（火曜もいくつかレッスンがあるけれど<tr>の数は同じ） <tr> <td>火曜の最後のA</td> <td>火曜の最後のB</td> </tr> </tbody> </table> </li> ``` いうなれば時間割のような構成が<li><table>を用いて作成されています。 今回、時間割の内容に変更があったため修正しているのですが、それぞれの曜日によって授業内容が異なるため、<td>の高さがバラバラになってしまい最後のコマの高さが揃いません。 <td>の高さがバラバラであるのは構わないので、最後の<tr>の高さを可変として、.lesson__tableで指定している高さにそろえるにはどうすればよいでしょうか。  この図でいうと赤丸の部分が微妙にそろいません。

tableにoverflow:hiddenを指定しtr:last-childの高さを大きくしてみたのですが
tableの高さも一緒に変わってしまいました。

Comments

[yambejp]

sampleがたりません
せめて火曜日分はきっちり書いてもらわないと
ずれるという現象が確認できませんん

Answer 1

別々のテーブルの個々の行の高さを揃えるという命題ですか？
一つのテーブルにまとめてしまうのが賢明だとおもいます

Comments

[xminimx]

高さが同じ別々のテーブルにある、最後の行の高さが現状バラバラで下に隙間ができてしまっており（図でいう緑色の線の上に白い隙間があいている）、そこを埋めたいのです。