更新履歴のCSSを追加する

先日新たに作成した「更新記録」のCSSを追加して、見てくれを変えてみました。見やすくなったでしょうか。

主な変更点は
・テーブルキャプションの左寄せ。
・テーブル見出しのセンタリングと改行禁止。
・テーブル内データの文字を小さめにする。
・折り返したときに上下の文字が重ならないようにした。

以下が変更後の状態。

以下は、変更前の状態。

htmlは、タグは変更せず、文字内容のみ変えました。
以下は、テーブル部分の一部抜粋。

<table><caption>【 更新履歴 】</caption>
<tbody class="kemu">
<tr>
　<th>日付</th>
　<th>投稿記事タイトル／その他の作業 覚え書き</th>
</tr>
<tr class="day-hr">
　<td rowspan="1">3/8</td>
　<td><a href="https://www.～～～">自作ダンボール本箱に紙を敷く</a></td>
</tr>
</tbody>
</table>

CSSは、全体を管理する「デザインCSS」には記述せず、記事内の <style>～ </style> タグ内に、記述しています。他の既存ページに影響を与えないので好きなように変更できます。

今までのCSSは以下の最初の2行のみ。今回の変更では3行目以下の記述を追加しました。

/* 今までの指定(以下の2行) */
tbody.kemu {line-height: 0.9 }
tr.day-hr {border-top: ridge 3px}

/* 23/03/09 追加 */
caption { text-align: left } /* 表の名称(キャプション)を左寄せ */

th {  /* テーブルヘッダ*/
text-align: center;　/* センタリング */
white-space: nowrap;　/*　改行させない */ 
}

td {　/* テーブルデータ*/
font-size: 85%;　/* 元のフォントサイズの85%*/
line-height: 2ex;   /* 小文字の「X」の高さの2倍 */
}