テーブルの線、一部を消したい時、
・cssで非表示を指定。
・テーブルのセルにclass設定。
で非表示となる。
<!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">
/*テーブルの線を非表示*/
.cell_tp {
border-right-style: none;
}
.cell_no {
border-left-style: none;
}
</STYLE>
</HEAD>
<body bgcolor='#ffffff' topmargin="2" leftmargin="5" rightmargin="5">
<br>
<h1>CSSテーブルの枠線を非表示</h1>
▼テーブル1
<table width="500" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#DCDCDC"><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>
▼テーブル2
<table width="500" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#DCDCDC"><th width=420>フルーツ</th><th>個数</th></tr>
<tr><td class="cell_tp">バナナ</td><td class="cell_no">2</td></tr>
<tr><td class="cell_tp">梨</td><td class="cell_no">4</td></tr>
<tr><td class="cell_tp">いちご</td><td class="cell_no">2</td></tr>
</table>
</body></html>
0 件のコメント:
コメントを投稿