CSSでテーブルの縦線、横線を消す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title>CSSテーブルの枠線を消す</title>
<STYLE TYPE="text/css">
/*縦の線を消す*/
.TABLE1 {
border-collapse: collapse;
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px; /* 枠の幅 */
}
.TABLE1 TH {
color: #ffffff; /* 文字の色 */
background-color: #99cc99; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px 0px; /* 枠の幅 */
}
.TABLE1 TD {
color: #000; /* 文字の色 */
background-color: #EEE; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px 0px; /* 枠の幅 */
}
/*横の線を消す*/
.TABLE2 {
border-collapse: collapse;
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 2px; /* 枠の幅 */
}
.TABLE2 TH {
color: #ffffff; /* 文字の色 */
background-color: #99cc99; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 0px 2px; /* 枠の幅 */
}
.TABLE2 TD {
color: #000; /* 文字の色 */
background-color: #EEE; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: green; /* 枠の色 */
border-width: 0px 2px; /* 枠の幅 */
}
</STYLE>
</HEAD>
<body bgcolor='#ffffff' topmargin="2" leftmargin="5" rightmargin="5">
<br>
<h1>CSSテーブル 縦横の線を消す</h1>
▼テーブル１ 縦の線を消す
<table width="500" border="1" cellspacing="0" cellpadding="5" class="TABLE1">
<tr><th width=420>フルーツ</th><th>個数</th></tr>
<tr><td>バナナ</td><td>2</td></tr>
<tr><td>梨</td><td>4</td></tr>
<tr><td>いちご</td><td>2</td></tr>
</table>
<br><br>
▼テーブル２ 横の線を消す
<table width="500" border="1" cellspacing="0" cellpadding="5" class="TABLE2">
<tr><th width=420>フルーツ</th><th>個数</th></tr>
<tr><td>バナナ</td><td>2</td></tr>
<tr><td>梨</td><td>4</td></tr>
<tr><td>いちご</td><td>2</td></tr>
</table>
</body></html>
参考ページ
http://css.eweb-design.com/1502_ty.html
0 件のコメント:
コメントを投稿