2013年8月1日木曜日

CSSテーブルの一部線を非表示

テーブルの線、一部を消したい時、

・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 件のコメント:

コメントを投稿