テーブル内のテキストの行間変更について

フォーラムの#2041がどういうものかわかりませんが、「固定ページ内のテーブルのテキストのみ行間」ということなので、

.page #the-content table td {
  line-height: 1;
}

あるいは、

[div class=test]
 [table]
  [tr][td][/td][/tr]
 [/table]
[/div]

こういう構造であれば、

.test table td {
  line-height: 1;
}

こういうことですが、テキストなのでこういうことですが、もしリンクにもline-heightが入っている場合は、

.test table td {
  line-height: 1;
}
.test table td a {
  line-height: 1;
}

こういうのが必要かと。

例えば、こういうの面倒なので、

[table class=test]
  [tr][td][/td][/tr]
[/table]

こうしておけば、

.test td {
  line-height: 1;
}

でもいけます。固定ページがどうとかは関係なく、testというclassがついた中のtdになるのでどれでも同じクラスのtdは同じ表示になります。

で、先ほどから使っているline-height: 1;ですが、line-height: 100%;みたいなもんです。いきなり、line-height:1.3;などと指定しても良いのですが、場合によっては予めline-height: 1;で初期化しておき、その後それを上書きさせて1.5;なりと指定しなくてはいけないこともあります。

.test td {
  line-height: 1;
}
.test td {
  line-height: 1.5;
}

こんな感じに連続で書きます。cssは継承やらがあって優先順位があったりするので、場合によってはカウンター的なプロパティを入れないといけないことがあるわけです。どれを打ち消してどれを適用させるかはそのものがどういう状況になっているかで異なります。

まぁtableに直でclassを入れれば、classが複数ないのであればたいていそれだけでイケると思うんですけれども。初期化は案外重要です。

テキストの行間を変更したいということですが、テキストには色んなタグが入っている可能性があります。先ほどのaもそうですが、delであったりiであったり色々あります。これらに行間を設定してあると、その部分だけ何やらおかしくなる可能性があるため、本来のcss設計では基本bodyなどの設定のみ継承して他に影響を及ぼさないようにline-heightの使用をなるべく控えめにするべきなのです。

どうしても利用する必要がある場合は、classで指定しておき、そのclassはそういう行間とデザインする人が理解しておく必要があります。まぁ複数行に及ぶ場合のみですけどね。たいていtableというのは数値であったり短い単語を利用することがほとんどなのでline-heightは1行分だけで良いはずなんです。

案外長めの文が必要でテーブルっぽい要素が必要な場合は、dl,dt,ddタグとかも考慮に入れると良いかと思います。

あ、書き忘れた

.test table td {
  line-height: 1;
}
.test table td a {
  line-height: 1;
}

は

.test table td {
  line-height: 1;
}
.test table td a {
  line-height: inherit;
}

のがよいです。
inheritは継承という意味です。親のline-heightを継承します。

うーむこれも書いとこう。

.test td {
  line-height: 1;
}
.test td {
  line-height: 1.5;
}

これは、

.test td {
  line-height: 1;
  line-height: 1.5;
}

こういう状態です。これで問題ないなら連続して書いておいても良いです。この場合、1を1.5で上書きするということです。1はそれまでの設定を初期化するということなので、結果的に初期化したものに新たに1.5の値をつけるということになります。