CSSの覚書 | ワクガンス

テーブルを区分スタイル（div)に変形する

サンプル

ソースコード

	<style>
	.table_transform{
		border:none;
		width:100%;
	}
	.table_transform thead{
		display:none;
	}
	.table_transform tbody tr{
		display:block;
		border-bottom:solid #2c2255 1px;
	}
	.table_transform tbody tr td{
		display:block;
		border:none;
	}
	</style>
	
	<table id="sec4-1a1" border="1" class="table_transform" >
		<thead>
			<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
		</thead>
		<tbody>
			<tr><td>1</td><td>neko</td><td>猫</td></tr>
			<tr><td>2</td><td>yagi</td><td>山羊</td><td>草食</td></tr>
			<tr><td>3</td><td>same</td><td>鮫</td></tr>
			<tr><td>4</td><td>wasi</td><td>鷲</td></tr>
			<tr><td>5</td><td>goki</td><td>御器</td></tr>
		</tbody>
	</table>
	

縦モードと横モードで適用するスタイルを変える

	@media only screen and (orientation : landscape) { /*横向きの際に適用*/
		#main{ width: 480px;}
	}
	
	@media only screen and (orientation : portrait) { /*縦向きの際に適用*/
		#main{ width: 320px;}
	}
	

２つブロック要素を左寄りと右寄りに並べて配置する

	<div style="display:inline-block;width:100%;background-color:#80b3ff">
						  
		<div style="float:left">左寄り</div>
		<div style="float:right">左寄り</div>
	</div>
	

デモ

注意

テーブルを自動縮小せず、値に合わせて横に広げ、スクロールバーを表示する | セル内で自動改行させない

テーブルを自動縮小や改行をさせず、値に合わせて横に広げスクロールバーを表示する

HTMLソースコード

	<div style="width:200px;overflow:auto">
		<table border="1" style="white-space:nowrap;">
			<thead>
				<tr><th>id</th><th>コード</th><th>名前</th></tr>
			</thead>
			<tbody>
				<tr><td>1</td><td>neko</td><td>猫</td></tr>
				<tr><td>2</td><td>yagi</td><td>わたしは他のだれよりも道理をわきまえておらず，人についての理解を持っていないからである。</td></tr>
				<tr><td>3</td><td>same</td><td>鮫</td></tr>
				<tr><td>4</td><td>wasi</td><td>鷲</td></tr>
				<tr><td>5</td><td>goki</td><td>御器</td></tr>
		
			</tbody>
		</table>
	</div>
	

スクリーンの縦半分 50vh

見本

	<div style="background-color:#ffd700;width:200px;height:50vh">
		縦の長さは画面縦半分になります。<br>
		ブラウザそのものを縦に伸縮させると、当区分も連動して伸縮します。<br>
	</div>
	

Boostrap3 横いっぱいに広げる

	/* 横いっぱいに広げる | bootstrapのハック */
	.container {width: auto;}
	

改行、スペース、タブを反映させる

<div style="white-space:pre-wrap; word-wrap:break-word;">
ウミヘビ
	タブのテスト	ウナギ	ウツボ
  スペースの反映  ミミズ    ヌタウナギ        イカリムシ
  長文による画面端改行のテスト→タウナギ（田鰻、Monopterus albus）は、タウナギ目タウナギ科に属する淡水魚の一種である。鰓弓内の粘膜を通じて空気呼吸を行うことで知られる。
</div>

見本

文字列の縁取り

	.hujidori{
		color: #ffcd43;
		-webkit-text-stroke: 1px #dd5044;
		text-stroke: 1px #dd5044;
	}
	

Boostrapのテーブル | テーブルの列幅固定を解除（自動列幅）

	.table, th, td {
		width: auto !important;
	}
	

xxx