コピペで使えるカスタムCSS

テーブル編

見出しセルに背景色

HTML

<table>
<tr>
<th>い</th>
<th>ろ</th>
<th>は</th>
</tr>
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
</tr>
</tbale>

CSS

table th{
background-color:#E0EBFC;
}

見出しセルに背景色+セルに下線

HTML

<table>
<tr>
<th>りんご</th>
<td>きゅうり</td>
<tr>
<tr>
<th>いちご</th>
<td>たまねぎ</td>
<tr>
<tr>
<th>みかん</th>
<td>にんじん</td>
<tr>
</table>

CSS

table{
border:none;
}
table th,
table td{
border-bottom:1px solid #ccc;
border-top:none;
border-left:none;
border-right:none;
}
table th{
background-color:#eae4d8;
}

見出しセルに背景色(立体的)

※わかりやすいように、長さ(width)を150pxに固定しています。不要の場合は長さ指定を削除してください。

table {
border-collapse: separate;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table th {
background: #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
font-weight: normal;
padding: 10px;
width:150px;
}
table td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top:none;
border-left:none;
padding: 10px;
width:150px;
}

テーブル左側にライン

※わかりやすいように、長さ(width)を150pxに固定しています。不要の場合は長さ指定を削除してください。

table {
border-top: 1px solid #ccc;
border-left: 5px solid #04407c;
border-right:none;
border-bottom:none;
}
table th {
border-top:none;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #04407c;
padding:10px;
width: 145px;
}
table td {
border-top:none;
border-right: 1px solid #ccc;
border-bottom:1px solid #ccc;
padding:10px;
width: 150px;
}

すべてに上下線

※わかりやすいように、長さ(width)を150pxに固定しています。不要の場合は長さ指定を削除してください。

table {
border-collapse: separate;
border-top: 1px solid #ccc;
border-left:none;
}
table th {
border-top:none;
border-left:none;
border-right:none;
border-bottom: 1px solid #ccc;
padding: 10px;
width: 150px;
}
table td {
border-top:none;
border-left:none;
border-right:none;
border-bottom: 1px solid #ccc;
padding: 10px;
width: 150px;
}

すべてに上下線（項目を真ん中寄せ）+中区切り線あり

table{
border-top: 1px solid #ccc;
}
table th {
border-bottom: 1px solid #ccc;
border-top:none;
border-left:none;
border-right:1px solid #ccc;
text-align:center;
width: 100px;
}
table td {
border-bottom: 1px solid #ccc;
border-top:none;
border-left:none;
border-right:none;
width: 200px;
}

項目下に太線+テーブル下に下線+セル点線

HTML

<table>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
</tr>
<tr>
<td>りんご</td>
<td>たまねぎ</td>
<td>にんじん</td>
</tr>
<tr>
<td>いちご</td>
<td>みかん</td>
<td>パイナップル</td>
</tr>
<tr>
<td>大根</td>
<td>蓮根</td>
<td>舞茸</td>
</tr>
<table>

CSS

table{
border-bottom: 5px solid #2A86BC;
}
table th {
border-bottom: 5px solid #2A86BC;
border-top:none;
border-left:none;
border-right:none;
text-align:center;
width: 80px;
}
table td {
border-bottom: 2px dotted #ccc;
border-top:none;
border-left:none;
border-right:none;
text-align:center;
width: 150px;
}