テーブルに表示された文字サイズを変更したい

[jfdojjwejwazn (ロール)]

テーブルを表示させたのですが、
テーブル内の文字が小さく見えにくいため太字や文字サイズを大きくしたいです。

コメントはこちらで見た記事を参考にCSSで大きくしましたが、
テーブル内の文字を大きくする方法をご教示いただけますと助かります。

よろしくお願いいたします。

[Maple (もみじ)]

テーブルのヘッダのことでしょうか。
ヘッダ以外の部分は他のフィールドとフォントサイズ変わらないので。

開発者ツールを見ると、ヘッダの文字は subtable-header-gaia クラスの
子要素の span タグにあると分かるので、ここに font-size で字のサイズ、
font-weight で字の太さを指定すればいいです。

.subtable-header-gaia span {
  font-size: x-large;
  font-weight: bold;
}

上のCSS適用後

[jfdojjwejwazn (ロール)]

ご返信ありがとうございます。

ヘッダの文字ではなく、中のテーブルに反映された文字を太く、大きくしたいと考えております。

[Maple (もみじ)]

ヘッダ以外の箇所でも、開発者ツールで大きくしたい字のクラス名を調べればできます。

調べ方はブラウザによって違いますが、Chromeなら対象の字にポインタを合わせて
右クリックして「検証」を選べばいいです。

[jfdojjwejwazn (ロール)]

ご返信ありがとうございます。
テストの部分を大文字と太字にしたくて検証を確認したのですが、
.show-subtable-gaia.{
font-weight: bold;
}

CSSを書いてみたのですが上手く反映されませんでした。
ド素人につきCSSの書き方をご教示いただけますと大変助かります。

[Maple (もみじ)]

レコード詳細画面で、テーブルの中にある文字列 (複数行)フィールドの値でしょうか。

その書き方では「テスト」を指定できていないので
「テスト」の直上のクラス名を書けば反映されると思います。

.control-value-gaia {
  font-size: x-large;
  font-weight: bold;
}

[jfdojjwejwazn (ロール)]

できました。ありがとうございます。
ちなみにスマホ版は反映されないのでしょうか。

[Maple (もみじ)]

子要素のタグまで指定すると、スマホ版でも反映されるようです。

反映されないテーブル内フィールドがあったら
そこの子要素タグが div 以外になってないか確認してみてください。

.control-value-gaia div {
  font-size: x-large;
  font-weight: bold;
}

[jfdojjwejwazn (ロール)]

ご丁寧にありがとうございます。
無事に反映できました。