カテゴリー表示モード:標準 | RC2

ホーム > CSS | WEB > テーブルのCSSデザイン追加

テーブルのCSSデザイン追加

table ってあまり使いたくないけど、簡単だからやっぱり使っちゃうな。
というわけで、CSSデザインサンプルサイトから、いくつか貰って入れてみた。
参考:CSS Design Catalog

現在のWordPressテーマ「ニコニコプレス(春)ver1.3」 の style.css 修正。

blockquote, pre {
	width:auto;
	margin:10px;
	background-color:#f8f8f8;
	padding:10px;
	border:1px solid #ccc;
	border-left:5px solid #ccc;
	background-image:url(images/block.gif);
	white-space: pre-wrap;
}

7行目追加 ボックス要素の左枠線を太く変更。

blockquoteサンプル

table要素のcss追加

table {						/*table標準*/
	margin-top: 0.2em;
	margin-bottom: 1em;
	border-collapse: separate;
	border-spacing: 2px;
}
table th,table td {
	padding: 4px 6px;
	white-space: nowrap;
}
table.s_blue th {			/*枠無し青*/
	background: #1B3AB4;
	color: #FFF;
}
table.s_blue td {
	background: #E5EAFF;
}

table.s_mono th {			/*枠無し影付きモノトーン*/
	border-bottom: solid 1px #B2B2B2;
	border-right: solid 1px #B2B2B2;
	background: #C3C3C3;
}
table.s_mono td {
	border-bottom: solid 1px #B2B2B2;
	border-right: solid 1px #B2B2B2;
	background: #F3F3F3;
}
table.c_mono {				/*枠ありモノトーン*/
	border-collapse: collapse;
	border: solid 1px #999;
}
table.c_mono th,table.c_mono td {
	border: solid 1px #999;
}
table.c_mono th {
	background: #C3C3C3;
}
table.c_mono td {
	background: #F3F3F3;
}
枠無し青(s_blue)

見出し th
中枠 td
中枠 td
枠無し影付きモノトーン(s_mono)

見出し th
中枠 td
中枠 td
枠ありモノトーン(c_mono)

見出し th
中枠 td
中枠 td