表アーカイブ - CodingMania

TableFix.jsを使って表の行と列を固定します

yotigory — Tue, 15 Sep 2015 08:36:04 +0000

JSを読み込みます

JavaScript

$(function(){
  $('.mod_table table').tablefix({width: 700, height: 300, fixRows: 1, fixCols: 1});
});

//行列ハイライト
$(document).ready(function() {
    $(".mod_table table td,.mod_table table th").hover(function() {
        $(this).not('th').addClass('hover');
        $(this).siblings().not('th').addClass('hover');
        var index = $(this).index();
        $(this).closest('table').find('tr').each(function() {
            if($('td, th', this).size() > 0) {
                $('td, th', this).eq(index).not('th').addClass('hover');
            }
        });
    }, function() {
        $(this).removeClass('hover');
        $(this).siblings().not('th').removeClass('hover');
        var index = $(this).index();
        $(this).closest('table').find('tr').each(function() {
            if($('td, th', this).size() > 0) {
                $('td, th', this).eq(index).not('th').removeClass('hover');
            }
        });
    });
});

HTMl




  
     
    タイトル01
    タイトル02
    タイトル03
    タイトル04
    タイトル05
    タイトル06
    タイトル07
    タイトル08
    タイトル09
  


  
    横タイトル01
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル02
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル03
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル04
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル05
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル06
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル07
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル08
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル09
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル10
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル11
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル12
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル13
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル14
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル15
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル16
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル17
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル18
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル19
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル20
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル21
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル22
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル23
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル24
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル25
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル26
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル27
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル28
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル29
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
  
  
    横タイトル30
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○
    ○

	タイトル01	タイトル02	タイトル03	タイトル04	タイトル05	タイトル06	タイトル07	タイトル08	タイトル09
横タイトル01	○	○	○	○	○	○	○	○	○
横タイトル02	○	○	○	○	○	○	○	○	○
横タイトル03	○	○	○	○	○	○	○	○	○
横タイトル04	○	○	○	○	○	○	○	○	○
横タイトル05	○	○	○	○	○	○	○	○	○
横タイトル06	○	○	○	○	○	○	○	○	○
横タイトル07	○	○	○	○	○	○	○	○	○
横タイトル08	○	○	○	○	○	○	○	○	○
横タイトル09	○	○	○	○	○	○	○	○	○
横タイトル10	○	○	○	○	○	○	○	○	○
横タイトル11	○	○	○	○	○	○	○	○	○
横タイトル12	○	○	○	○	○	○	○	○	○
横タイトル13	○	○	○	○	○	○	○	○	○
横タイトル14	○	○	○	○	○	○	○	○	○
横タイトル15	○	○	○	○	○	○	○	○	○
横タイトル16	○	○	○	○	○	○	○	○	○
横タイトル17	○	○	○	○	○	○	○	○	○
横タイトル18	○	○	○	○	○	○	○	○	○
横タイトル19	○	○	○	○	○	○	○	○	○
横タイトル20	○	○	○	○	○	○	○	○	○
横タイトル21	○	○	○	○	○	○	○	○	○
横タイトル22	○	○	○	○	○	○	○	○	○
横タイトル23	○	○	○	○	○	○	○	○	○
横タイトル24	○	○	○	○	○	○	○	○	○
横タイトル25	○	○	○	○	○	○	○	○	○
横タイトル26	○	○	○	○	○	○	○	○	○
横タイトル27	○	○	○	○	○	○	○	○	○
横タイトル28	○	○	○	○	○	○	○	○	○
横タイトル29	○	○	○	○	○	○	○	○	○
横タイトル30	○	○	○	○	○	○	○	○	○

CSS


/* .mod_table 
-----------------------------------------*/
.mod_table{
  background-color: #f2f2f2;
  border-radius: 4px;
  padding: 10px;
  width: 720px;
 }
.mod_table table{
 width:1000px;
 background:#FFF;
}
.mod_table table th,td{
	border-bottom:solid 1px #7f7f7f;
 border-left:solid 1px #7f7f7f;
	padding:10px;
}
.mod_table table th{
 background:#f8f8f8;
 color:#000;
 font-weight:normal;
 text-align:center;
 vertical-align:middle;
white-space:nowrap;
}
.mod_table table th.coltitle{
 background:#666;
 color:#FFF;
}
.mod_table table td{
 text-align:center;
}
/*  */
.mod_table table td.hover,
.mod_table table th.hover {
 background-color:#FFFEB5;
}

投稿 TableFix.jsを使って表の行と列を固定しますは CodingMania に最初に表示されました。

Grid.jsを使って表の行と列を固定します

yotigory — Tue, 15 Sep 2015 05:56:47 +0000

JSを読み込みます

JavaScript

HTMl

見出し	タイトル01	タイトル02	タイトル03	タイトル04	タイトル05	タイトル06	タイトル07	タイトル08	タイトル09	1001	1002	1003	1004	1005
横タイトル01	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル02	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル03	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル04	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル05	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル06	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル07	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル08	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル09	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル10	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル11	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル12	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル13	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル14	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル15	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル16	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル17	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル18	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル19	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル20	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル21	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル22	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル23	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル24	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル25	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル26	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル27	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル28	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル29	○	○	○	○	○	○	○	○	○	○	○	○	○	○
横タイトル30	○	○	○	○	○	○	○	○	○	○	○	○	○	○

CSS

/* #demoGrid 
-----------------------------------------*/
#demoGrid{
 margin:20px 0 20px 0;
 width: 600px;
 height: 300px;
 overflow: auto;
 	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
 background-color:#f2f2f2;
 padding:10px;
}

/*
 Grid
 MIT-style license. Copyright 2012 Matt V. Murphy
*/
.g_Base {
	background-color : #fff;
}
.g_BaseResize {

	background-color : #eee;
}
.g_BaseResize:hover {
	background-color : #ccc;
}
.g_ResizeDragger {

	background-color : #ccc;
}
/* Title */
.g_HR {
	background-color : #666;
 color:#FFF!important;
}
/* text */
.g_C {
  color:#000;
  }
  
/* row title */  
.g_Cl0 {
  background-color: #F8F8F8!important;
}
.g_Cl1 {
  background-color: #F8F8F8!important;
}

div.g_Base div.g_Body div.g_BodyStatic div.g_Cl{
 text-align:center;
}

投稿 Grid.jsを使って表の行と列を固定しますは CodingMania に最初に表示されました。

html5 入力フォームのテンプレート！[表型]

yotigory — Fri, 12 Aug 2011 06:14:45 +0000

JSを読み込みます

[formcheck.js]JavaScript

$(function(){
		   //送信ボタンの無効、チェックボックスを外す
			$(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			$(".mod_form_importance_btn input:checkbox").attr('checked',false);
		   //チェックボックスがクリックされると送信ボタン有効
			$(".mod_form_importance_btn label,.mod_form_importance_btn input").click(function(){
				if($(".mod_form_importance_btn input:checkbox").attr('checked')==true){
					$(".mod_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
				}else{
					 $(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
					}
			   })
		});

HTMl


[必須]項目は必ずご入力ください。




お問い合わせ項目 [必須]



名前 [必須]




フリガナ [必須]



性別


男性 
女性





メールアドレス [必須]


例：info@gmai.com


メールアドレス確認 [必須]


確認のため再度ご記入ください



郵便番号


例：571-0212


都道府県 [必須]



市区町村・番地


例：神戸市北区花山南町5-2


マンション・アパート名


例：メゾン南000号


電話番号 [必須]


例：0728122800


品番


その他の品番は下記へご記入ください。





日付

 年

 月

 日




色


その他を選択された方はご記入ください。






好きなお菓子はなんですか？



 チョコレート

 ビスケット

 ラムネ

 グミ

 ポテトチップス

 おかき

 ポップコーン

 わたあめ


 ケーキ

 まんじゅう

 ガム

 プリン

 シュークリーム

 昆布

 その他





お問い合わせ内容






「個人情報保護方針」と「当社における個人情報の取扱について」
上記のお問い合わせフォームから情報を送信する前に、下記の「個人情報保護方針」と「当社における個人情報の取扱について」をご一読の上、「個人情報保護方針」にご同意頂ける場合は、「同意する」にチェックをお願いします。


会社名および個人情報保護管理者
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報の利用目的

・箇条書き

・箇条書き
・箇条書き


個人情報の提供
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報の取扱いの委託について
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報を入力するにあたっての注意事項 


（1）文章が入ります。
（1）文章が入ります。
（1）文章が入ります。


本人が容易に認識できない方法による個人情報の取得
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

開示対象個人情報の開示等および問合せ窓口について 
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。







 個人情報保護方針に同意する

お問い合わせ項目 [必須]
名前 [必須]
フリガナ [必須]
性別	男性女性
メールアドレス [必須]	例：info@gmai.com
メールアドレス確認 [必須]	確認のため再度ご記入ください
郵便番号	例：571-0212
都道府県 [必須]
市区町村・番地	例：神戸市北区花山南町5-2
マンション・アパート名	例：メゾン南000号
電話番号 [必須]	例：0728122800
品番	その他の品番は下記へご記入ください。
日付	年月日
色	その他を選択された方はご記入ください。
好きなお菓子はなんですか？	チョコレートビスケットラムネグミポテトチップスおかきポップコーンわたあめケーキまんじゅうガムプリンシュークリーム昆布その他
お問い合わせ内容

CSS

/* 必須
-----------------------------------------*/
.ex_essential{
	color:#CC0000;
	font-weight:normal;
}
/* エラー
-----------------------------------------*/

/* 注釈
-----------------------------------------*/
.ex_comment{
	color:#666;
}
/* フォームレイアウト
-----------------------------------------*/
.mod_form{
	margin:0 auto;
	margin-bottom:20px;
	padding:20px;
	width: 700px;
	border:solid 5px #EEE;
}
.mod_form p.point{
	text-align:right;
}
.mod_form table{
	width:100%;
	border-collapse:separate;
	border-spacing:2px;
}
.mod_form table tr th{
	padding:10px;
	white-space: nowrap;
	font-weight:bold;
	vertical-align: top;
	border-bottom:solid 1px #C1D0E3;
	background-color:#EBF0F6;
}
.mod_form table tr td{
	width:70%;
	padding:10px;
	border-bottom:solid 1px #B6D1F5;
}

/* フォーム内2段組
-----------------------------------------*/
.mod_form_listbox{
	width:100%;
}
.mod_form_listbox_left{
	float:left;
	width:50%;
}
.mod_form_listbox_right{
	float:left;
	width:50%;
}

/* 入力パーツ
-----------------------------------------*/	
label {
  cursor: pointer;
}
select#item,
select#address01,
select#maker,
select#color{
	width:250px;
}
select#nengou,
select#year,
select#month,
select#day{
	width:60px;
}
input,
textarea{
	border:solid 1px #CCCCCC;
}
input#character_m,
input#character_w,
.mod_form_listbox input{
	border:none;
}

input#address02,
input#bill{
	width:350px;
	height:1.4em;
}
input#name,
input#kana,
input#email,
input#emailcheck,
input#maker_etc,
input#color_etc{
	width:250px;
	height:1.4em;
}
input#zipcode,
input#tel{
	width:150px;
	height:1.4em;
}
textarea{
	width:350px;
}
/* フォーカス・チェック
-----------------------------------------*/
input:focus,
textarea:focus{
	background-color:#FFFFCC;
}
input:checked + label{
	background-color:#FFFFCC;
	font-weight:bold;
}

/* 重要なお知らせの同意
-----------------------------------------*/
.mod_form_importance{
	margin:20px 0 0 0;
	padding:10px;
	border:double 3px #CCC;
	background-color:#DDD;
}
.mod_form_importance h2{
	font-weight:bold;
}
.mod_form_importance_txt{
	width:634px;
	height:250px;
	overflow:scroll;
	margin:10px 0 20px 0;
	padding:10px 20px 15px 20px;
	background-color:#FFF;
}
.mod_form_importance_txt h3{
	margin:10px 0 5px 0;
	font-weight:bold;
	border-bottom:solid 1px #DDD;
}
.mod_form_importance_btn{
	text-align:center;
}

/* 送信ボタンとエラー表示
-----------------------------------------*/
.mod_form_btn{
	margin:20px 0 0 0;
	text-align:center;
}

.mod_form_btn input#back,
.mod_form_btn input#submit{
	width:150px;
	padding:5px;
}


/* clearfix：float解除＆親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.ex_clearfix {
  min-height: 1px;
}
* html .ex_clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

投稿 html5 入力フォームのテンプレート！[表型] は CodingMania に最初に表示されました。

jqueryで表・テーブルのデータ・行を抽出・表示します。

yotigory — Sat, 26 Mar 2011 07:19:32 +0000

JSを読み込みます

[datatable.js]JavaScript

$(function(){
	//表をストライプ表示
	$(".mod_datatable table th:nth-child(odd)").addClass("odd");
	$(".mod_datatable table tr:nth-child(odd)").addClass("odd");
	//選択したクラス行のみ表示
	$("ul.mod_koumokulist li a").click(function(){
		var year = $(this).attr("class");
		$(".mod_datatable table tr").css("display","none");
		$(".mod_datatable table tr.title,tr." + year).show(); 
		return false;
	});
	//全てを表示
	$("li.mod_LabelAll a").click(function(){
		$(".mod_datatable table tr").show(); 
			return false;
	});
});

HTMl



すべて表示する



1930年
1931年
1932年
1933年
1934年
1935年
1936年
1937年
1938年
1939年
1950年
1951年
1952年
1953年
1954年
1955年
1956年
1957年
1958年
1959年


   
    年
    項目1
    項目2
    項目3
    備考

  
    1934年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    1934年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    1934年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1935年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1935年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1935年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1936年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1937年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1938年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1950年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    1950年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1952年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    1952年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1953年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    1953年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1953年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1954年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1955年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    1955年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1955年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1955年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

  
    1955年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1956年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1956年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
   
    年
    項目1
    項目2
    項目3
    備考
  
  
    1957年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1957年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1957年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1957年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1957年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1957年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    年
    項目1
    項目2
    項目3
    備考
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1958年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
    
    年
    項目1
    項目2
    項目3
    備考
  
  
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
    
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
    
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
    
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
    
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
    
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
    
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
    
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります
  
  
    1959年
    項目1の内容
    項目2の内容
    項目3の内容
    備考欄なのでいろいろ詳細が入ります

年	項目1	項目2	項目3	備考
1934年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1934年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1934年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1935年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1935年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1935年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1936年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1937年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1938年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1950年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1950年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1952年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1952年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1953年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1953年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1953年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1954年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1955年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1955年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1955年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1955年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1955年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1956年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1956年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1957年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1957年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1957年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1957年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1957年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1957年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1958年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
年	項目1	項目2	項目3	備考
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります
1959年	項目1の内容	項目2の内容	項目3の内容	備考欄なのでいろいろ詳細が入ります

CSS

/* リスト部分 */
.mod_datatable ul li{
	min-height:7px;
	height:auto!important;
	height:7px;
	padding:0 0 0 8px;
	background:transparent url("gnavi_mark.gif") no-repeat scroll left 0.4em;
}
.mod_datatable ul li a:link    {color:#669900; text-decoration:none;}
.mod_datatable ul li a:visited {color:#669900; text-decoration:none;}
.mod_datatable ul li a:hover   {color:#FFF; text-decoration:none; background-color:#669900;}
.mod_datatable ul li a:active  {color:#FFF; text-decoration:none; background-color:#669900;}

/* 項目リスト部分 */
.mod_datatable ul.mod_koumokulist{
	width:500px;/* リストの幅 */
	overflow:hidden;
	position:relative;
}
.mod_datatable ul.mod_koumokulist li{
	width:4.5em;
	float:left;
	white-space: nowrap; /* IE6文章途中で折り返さない */
}
/* データ表部 */
.mod_datatable table{
	border-collapse: collapse;
	border-left:1px solid #bbb;
	border-tpp:1px solid #bbb;
	border-bottom:1px solid #bbb; /* IE6抽出後の下線表示 */
}
/* 見出し行 */
.mod_datatable table th{
	color:#fff;
	font-size:110%;
	text-align:center;
	background-color:#675E58;
}
.mod_datatable table th,
.mod_datatable table td{
	padding:5px;
	border-right:1px solid #bbb;
	border-bottom:1px solid #bbb;
}
/* しましま色設定 */
.odd{
	background-color:#DEDCDA;
}

投稿 jqueryで表・テーブルのデータ・行を抽出・表示します。は CodingMania に最初に表示されました。

table表のデザインを変える

yotigory — Sun, 13 Mar 2011 06:36:53 +0000

HTMl




見出し
説明文章が入ります。


見出し
説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。


見出し
説明文章が入ります。

説明文章が入ります。


見出し
説明文章が入ります。

見出し	説明文章が入ります。
見出し	説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。
見出し	説明文章が入ります。説明文章が入ります。
見出し	説明文章が入ります。

CSS

.mod_hyou_001 table{
	border-top:solid 2px #666;
	border-bottom:solid 2px #666;
}
.mod_hyou_001 table th,td{
	border-bottom:solid 1px #CCC;
	padding:5px;
}
.mod_hyou_001 table th{
	width:50px;
	vertical-align:top;
	font-weight:bold;
	border-right:solid 1px #CCC;
	white-space:nowrap;
}
.mod_hyou_001 table td{
	width:300px;
}

投稿 table表のデザインを変えるは CodingMania に最初に表示されました。

表 アーカイブ - CodingMania

TableFix.jsを使って表の行と列を固定します

JSを読み込みます

JavaScript

HTMl

CSS

Grid.jsを使って表の行と列を固定します

JSを読み込みます

JavaScript

HTMl

CSS

html5 入力フォームのテンプレート！[表型]

JSを読み込みます

[formcheck.js]JavaScript

HTMl

「個人情報保護方針」と「当社における個人情報の取扱について」

会社名および個人情報保護管理者

個人情報の利用目的

個人情報の提供

個人情報の取扱いの委託について

個人情報を入力するにあたっての注意事項

本人が容易に認識できない方法による個人情報の取得

開示対象個人情報の開示等および問合せ窓口について

CSS

jqueryで表・テーブルのデータ・行を抽出・表示します。

JSを読み込みます

[datatable.js]JavaScript

HTMl

CSS

table表のデザインを変える

HTMl

CSS

表アーカイブ - CodingMania