<tr>の高さを固定にして行がクリックされた時に非表示の部分を表示したい

Question

<table>
<tbody>
<tr><td>1</td><td>テキスト</td><td>テキスト</td></tr>
<tr><td>2</td><td>長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</td><td>テキスト</td></tr>
<tr><td>1</td><td>テキスト</td><td>テキスト</td></tr>
</tbody>
</table>

######問題点
長いテキストがあると、その文字数で全体の高さが決められてしまいます。

######やりたいこと
・文字数に関係なく行の高さは固定
・隠れている部分はその行をクリックで表示

以上です。
何卒、よろしくお願いいたします。

Comments

[kura]

質問のHTMLが破綻しているので、正しく修正してもらうと回答しやすいです。（</td>～<td>の間に文字は入れられません。） また、「文字数に関係なく行の高さは固定」とありますが、幅についてはどうしたいのですか？幅について特に指定がなければ、すべてのテキストを横に長い1行にする方法がありますが…。

[ssk]

kura様　申し訳ございません。確認不足でした。<td>の内容を修正しました。幅については、できれば固定にしたいです。

Answer 1

いろいろな方法があると思いますが、簡易的にCSSで表現する方法を紹介します。

<table>
<tbody>
<tr><td>1</td><td>テキスト</td><td>テキスト</td></tr>
<tr tabindex="-1"><td>2</td><td><div class="longtext">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</div></td><td>テキスト</td></tr>
<tr><td>1</td><td>テキスト</td><td>テキスト</td></tr>
</tbody>
</table>

HTMLのポイント

• 固定した高さより高くなるであろうテキストを<div class="longtext">～</div>で囲う。
• ↑で囲ったテキストに対応する<tr>にtabindex="-1"の属性を指定する。

td:nth-child(2) {
  width: 200px;
}
td {
  height: 2em; /* 固定したい高さ */
}
.longtext {
  max-height: 2em; /* ここにも固定したい高さ */
  overflow: hidden;
}
tr:focus .longtext {
  max-height: none;
}

CSSのポイント

• 固定したい高さを2箇所に記述する。td{}への指定はセルそのものの高さを、tr:focus .longtext{}への指定は長いテキストに対する高さの制御になる。
• tr:focus .longtext {}は、該当行をクリック（フォーカス）した時の.longtextへの指定を示す。max-height: none;が指定されていることで、クリックしたときに長いテキストの高さの制限がなくなり、全体が表示される。

サンプル https://jsfiddle.net/x00fuov1/2/

今回はCSSでのサンプルにしましたが、もしJavaScriptで作成するとしても基本的には同じような流れ（中身の要素の高さを制限→クリックしたときにその制限を解除）になると思います。
参考にしてください。

Comments

[ssk]

サンプル情報までありがとうございます！
無事、実装することができました。