table内の要素に、Bootstrapのsmallタグが効かない

Bootstrapのsmallタグを使って、フォントサイズを小さくしたいのですが、table内だけ、それが適用になりません。
例えば、下記のように記述したとき、aaaとcccは小さくなるのですが、bbbだけ元の大きなサイズのままです。

lang
1<head>
2<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
3</head>
4
5<body>
6<small>
7aaa
8<table class="table table-condensed">
9    <tr>
10    	<td>bbb</td>
11    </tr>
12</table>
13ccc
14</body>

<small>タグの代わりに、<span class="small">を用いても同じ結果です。
ちなみに、tableの、class="table table-condensed"は、削除しても文字サイズについては同じ結果です。

どうしてこうなるのか分からないのですが、BootstrapによるCSSの指定は、table内の要素には及ばないのでしょうか。
対処法をご存知の方、ご教示頂ければ幸いです。
よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

参考情報

small 要素 http://www.html5.jp/tag/elements/small.html

...
small 要素は、複数の段落、リスト、セクションといった、広範なテキストに使うべきではありません。これは、短いテキストの範囲のみを想定したものです。例えば、利用規約を掲載したページのテキストには、small 要素は適切な候補とはならないでしょう。
...

文書全体やある段落全体のフォントサイズを指定したいなら、 <div class="foo"> ... </div> で囲って、foo のクラスに対して font-size を指定するとよいとおもいます。

font-sizeのパーセント表記一覧 http://webtech-walker.com/archive/2008/05/16032443.html

投稿2015/02/14 02:42

katoy

総合スコア22324

退会済みユーザー

2015/02/14 03:58

ありがとうございました。 bootstrapによらず、cssで指定しようと思います。ただ、tableを含む範囲をdivで指定しても、 table内のフォントだけ変わってくれませんでした。ひょっとして、下記に記載のある、「フォントサイズの指定がテーブル内に継承されない」という問題なのかと思いましたが、ブラウザはchromeでもfirefoxでも同じ結果でしたので、違うと思います。 http://norisfactory.com/stylesheetlab/000007.php cssでtableを特定した上でフォントサイズを指定したら、うまくいきましたので、とりあえずこれで対応しようと思います。

行動規範の内容に同意します