質問編集履歴

1 火曜のhtmlも記入しました。<tr>はどの曜日も9つで、最後の<tr>で全体の高さをそろえたいです。

xminimx

xminimx score 51

2019/05/31 16:03  投稿

tableの高さを保ったままtrの高さを可変としたい
<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>・・・
 <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で指定している高さにそろえるにはどうすればよいでしょうか。
![イメージ説明](4fa9a1e775988bf56fbccc43d0cce0b1.jpeg)
この図でいうと赤丸の部分が微妙にそろいません。
tableにoverflow:hiddenを指定しtr:last-childの高さを大きくしてみたのですが
tableの高さも一緒に変わってしまいました。
  • HTML

    20022 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • TableView

    321 questions

    TableView(UITableView)とは、リスト形式で表示するコントロールで、ほとんどのアプリに使用されています。画面を「行」に分けて管理し、一般的には各行をタップした際に詳細画面に移動します。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る