フォノクラフト株式会社：作業メモや備忘録など

作業メモや備忘録など…

セルにうっすらと白い枠があるテーブル

without comments

使い道

セルにうっすらと白い枠があるテーブル

おおざっぱなので余計な属性も入ってます。

サンプル

CSSがバッティングしてちょっと変になってますが・・・

CSSソース

table#table-search {
    width: 990px;
    border: 1px #999 solid;
    border-collapse: collapse;
    border-spacing: 0;
    text-align:left;
    margin-bottom:20px;
}

table#table-search th {
    border: #999 solid;
    border-width: 0 0 1px 1px;
    background: #fff;
    font-weight: bold;
    line-height: 120%;
    text-align:left;
    width:300px;
    font-weight:normal;
}

	table#table-search th div{
	background:#F6F5F0;border:1px solid #fff;
	}
		table#table-search th div p{
		padding:10px 10px;
		}
table#table-search td {
    border: 1px #999 solid;
    border-width: 0 0 1px 1px;
    text-align:left;
}

	table#table-search td div{
	background:#fff0;border:1px solid #fff;
	}
		table#table-search td div p{
		padding:5px 10px;
		}
table#table-search .rbn {
border-right:1px solid #ebebeb;
width:100px;
}

HTMLソース

<table border="0" cellpadding="0" cellspacing="0" id="table-search">
<tr>
<td colspan="3">
<div style="background:#A2A094;border:1px solid #fff;color:#fff;"><p style="padding:10px">お好みの条件を選んでください。</p></div>
</td>
</tr>
<tr>
<th rowspan="2"><div><p style="padding:25px 10px;">ジャンル、ブランドを選んでください</p></div></td>
<td class="rbn"><div><p>ジャンル</p></div></td>
<td><div><p><select name="s6" onchange="doBrandSearch();">
<option label="選択してください" value="">選択してください</option>
<option label="Stylish Elegance" value="Stylish+Elegance">Stylish Elegance</option>
<option label="Princess Lady" value="Princess+Lady" selected>Princess Lady</option>
<option label="Luxury Glamorous" value="Luxury+Glamorous">Luxury Glamorous</option>
<option label="Sweet Mix" value="Sweet+Mix">Sweet Mix</option>
<option label="Fashion Goods&amp;Beauty" value="Fashion+Goods%26Beauty">Fashion Goods&amp;Beauty</option>
</select>
</p></div></td>
</tr>
<tr>
<td class="rbn"><div><p>ブランド</p></div></td>
<td><div><p><select name="BC">
<option label="指定しない" value="" selected>指定しない</option>
<option label="Apuweiser-riche" value="APU01">Apuweiser-riche</option>
<option label="BE RADIANCE" value="BER01">BE RADIANCE</option>
<option label="ETHIQUE" value="EQU01">ETHIQUE</option>
<option label="fita fita" value="FIT01">fita fita</option>
<option label="Honey mi Honey" value="HMH01">Honey mi Honey</option>
<option label="Joias" value="JOI01">Joias</option>
<option label="L'EST ROSE" value="LES01">L'EST ROSE</option>
<option label="QUEENS COURT" value="QUE01">QUEENS COURT</option>
<option label="Xmiss" value="XMS01">Xmiss</option>
</select>
</p></div></td>
</tr>
<tr>
<th><div><p>商品のカテゴリー、表示順を選んでください</p></div></td>
<td class="rbn"><div><p>カテゴリー</p></div></td>
<td><div><p><select name="path">
<option label="選択してください" value="" selected>選択してください</option>
<option label="シゲグッズ" value="53">シゲグッズ</option>
<option label="アクセサリー" value="1">アクセサリー</option>
<option label="バッグ" value="4">バッグ</option>
<option label="小物" value="6">小物</option>
<option label="ランジェリー" value="44">ランジェリー</option>
<option label="ワンピース" value="16">ワンピース</option>
<option label="アウター" value="18">アウター</option>
<option label="パンツ" value="25">パンツ</option>
<option label="ルームウェア" value="43">ルームウェア</option>
<option label="シューズ" value="27">シューズ</option>
<option label="スカート" value="29">スカート</option>
<option label="トップス" value="31">トップス</option>
<option label="その他" value="39">その他</option>
</select>
</p></div></td>
</tr>
<tr>
<th><div><p>商品の価格帯を選んでください</p></div></td>
<td class="rbn"><div><p>価　格</p></div></td>
<td><div><p><input name="pl" type="text" size="10" maxlength="11" value="">&nbsp;円&nbsp;〜&nbsp;<input name="ph" type="text" size="10" maxlength="11" value="">&nbsp;円</p></div></td>
</tr>
<tr>
<th rowspan="2"><div><p style="padding:25px 10px;">商品の販売・入荷状況を選んでください</p></div></td>
<td class="rbn"><div><p>販売状況</p></div></td>
<td><div><p>
	<select name="s3">
			<option value=""	selected>指定しない</option>
			<option value="4" >予約商品のみ</option>
			<option value="1" >通常商品のみ</option>
			<option value="2" >セール商品のみ</option>
			<option value="3" >アウトレット商品のみ</option>
	 </select>
</p></div></td>
</tr>
<tr>
<td class="rbn"><div><p>入荷状況</p></div></td>
<td><div><p>
	 <select name="s7" >
			<option value="" selected>指定しない</option>
			<option value="2" >COMINGSOON</option>
			<option value="1" >NEW</option>
			<option value="3" >SOLDOUT</option>
			<option value="4" >再入荷</option>
	 </select>
</p></div></td>
</tr>
<tr>
<th><div><p>検索キーワードを入力してください</p></div></td>
<td class="rbn"><div><p>キーワード</p></div></td>
<td><div><p><input name="q" type="text" id="text" size="45" maxlength="100" value="" /></p></div></td>
</tr>
<tr>
<th><div><p>表示順を指定してください</p></div></td>
<td class="rbn"><div><p>表示順</p></div></td>
<td><div><p><select name="sort">
<option label="表示順" value="" selected>表示順</option>
<option label="新着順" value="1">新着順</option>
<option label="売れ筋順" value="2">売れ筋順</option>
<option label="価格が高い順" value="3">価格が高い順</option>
<option label="価格が安い順" value="4">価格が安い順</option>
</select>
</p></div></td>
</tr>
</table>

Similar Posts

Categoty in CSS / HTML

«
»