FAQ：一覧画面の行の高さを調整したい
## 回答
[スタイル](/ja/manual/table-management-style)を使用します。
---
## 概要
スタイル機能を用いて一覧画面の行高さを指定の高さに変更できます。
## 設定手順
1. 対象のテーブルを開きます。
1. 「管理」→[テーブルの管理](/ja/manual/table-management)をクリックします。
1. [スタイル](/ja/manual/table-management-style)タブを開きます。
1. 「＋新規作成」ボタンをクリックし、ダイアログを表示します。
1. タイトルに「一覧画面の行の高さを調整」等の任意のタイトルを入力します。
1. スタイルに行の高さを調整するスタイルを入力します。
1. 出力先の「全て」のチェックを外し、[一覧](/ja/manual/table-management-grid)にチェックします。
1. ダイアログの変更ボタンをクリックします。
1. 画面下部の更新ボタンをクリックします。
1. 対象のテーブルの一覧画面を開き、行の高さを確認します。
## スタイル例
行の高さを「200px」に設定するスタイルです。
##### CSS
```
.grid-row > td > * {
max-height: 200px !important;
}
```
#### マウスオーバー時の動作について
一覧画面では項目の文字数が一定の量を超えると一定の行の高さで隠れ、マウスカーソルを対象の行にあてることで隠れている部分も表示できる仕様となっていますが、上記の指定を行うことにより行の高さが固定されます。マウスカーソルを対象の行にあてることで隠れている部分を表示するには、以下のスタイルを追加で設定してください。
##### CSS
```
.grid-row > td > *:hover {
max-height: initial !important;
}
```
## 関連情報
<div id="ManualList"><ul><li><a href="/ja/manual/table-management">テーブルの管理</a><span>2024/05/24 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-grid">テーブルの管理：一覧画面</a><span>2023/05/12 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-style">テーブルの管理：スタイル</a><span>2024/12/10 up</span></li></ul></article>
<ul><li><a href="/ja/manual/style">開発者向け機能：スタイル</a><span>2023/05/18 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
