tableのtdの最大行数を指定したい

Question

プログラミング学習３歴ヶ月の者です。
現在、データベースのデータを表にまとめようとしているのですが、長文のデータがあった際に、<tr>の高さがすごく高くなってしまいます。
そこで、それぞれのレコードの最大表示行数を3行にしたいと思い、trやtdにstyleでmax-heightを指定しようとしたり、CSSのline-crampを適用しようとしたのですが、適用されませんでした。
bootstrapの記述を消してもこれらが適用されませんでした。

どうすれば<tr>の表示行数を指定できるのでしょうか？
どなたか教えていただければ幸いです。

<table class="table mt-3">
      <thead>
        <tr class="table-secondary">
          <th scope="col">店名</th>
          <th scope="col">住所</th>
          <th scope="col">営業時間</th>
          <th scope="col">定休日</th>
        </tr>
      </thead>
      <tbody>
        <% @restaurants.each do |restaurant| %>
          <tr>
            <td class="align-middle pr-0 table-data"><%= restaurant.name if restaurant.name.present?%></td>
            <td class="align-middle pr-0 table-data"><%= restaurant.address if restaurant.address.present? %></td>
            <td class="align-middle pr-0 table-data"><%= restaurant.open_time if restaurant.open_time.present? %></td>
            <td class="align-middle pr-0 table-data"><%= restaurant.close_day if restaurant.close_day.present? %></td>
          </tr>
        <% end %>
      </tbody>
    </table>

scss

.table-data {
    max-height: 97.5px;
    overflow-y: scroll;
}

Answer 1

td タグは display: table-cell で max-height は使えない仕様です
内側に div を作って同様にmax-height で調整するのが早いと思います。

display: -webkit-boxと-webkit-line-clamp: 3; によって行数指定もできますがモダンブラウザでも対応状況が少ないです。
どちらにせよ 内側に div を作ることになります

Comments

[kobatomo-0725]

おっしゃる通りにするとやりたかったデザインにすることができました！
ご回答ありがとうございます！