投稿 TableFix.jsを使って表の行と列を固定します は CodingMania に最初に表示されました。
]]><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/TableFix.js"></script>
$(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');
}
});
});
});
<div class="mod_table">
<table>
<thead>
<tr>
<th class="coltitle"> </th>
<th class="coltitle" scope="col">タイトル01</th>
<th class="coltitle" scope="col">タイトル02</th>
<th class="coltitle" scope="col">タイトル03</th>
<th class="coltitle" scope="col">タイトル04</th>
<th class="coltitle" scope="col">タイトル05</th>
<th class="coltitle" scope="col">タイトル06</th>
<th class="coltitle" scope="col">タイトル07</th>
<th class="coltitle" scope="col">タイトル08</th>
<th class="coltitle" scope="col">タイトル09</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">横タイトル01</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル02</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル03</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル04</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル05</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル06</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル07</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル08</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル09</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル10</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル11</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル12</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル13</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル14</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル15</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル16</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル17</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル18</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル19</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル20</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル21</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル22</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル23</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル24</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル25</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル26</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル27</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル28</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル29</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル30</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</tbody>
</table>
</div>
/* .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を使って表の行と列を固定します は CodingMania に最初に表示されました。
]]><link rel="stylesheet" href="css/Grid.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/Grid.js"></script>
<script type="text/javascript">
(function(window, document, undefined) {
"use strict";
//taitle property
var gridColSortTypes = ["string", "string", "string", "string", "string", "string", "string", "string", "string", "number", "number", "number", "number", "number"],
gridColAlign = [];
var onColumnSort = function(newIndexOrder, columnIndex, lastColumnIndex) {
var offset = (this.options.allowSelections && this.options.showSelectionColumn) ? 1 : 0,
doc = document;
if (columnIndex !== lastColumnIndex) {
if (lastColumnIndex > -1) {
doc.getElementById("demoHdr" + (lastColumnIndex - offset)).parentNode.style.backgroundColor = "";
}
doc.getElementById("demoHdr" + (columnIndex - offset)).parentNode.style.backgroundColor = "#f7f7f7";
}
};
var onResizeGrid = function(newWidth, newHeight) {
var demoDivStyle = document.getElementById("demoDiv").style;
demoDivStyle.width = newWidth + "px";
demoDivStyle.height = newHeight + "px";
};
for (var i=0, col; col=gridColSortTypes[i]; i++) {
gridColAlign[i] = (col === "number") ? "right" : "left";
}
var myGrid = new Grid("demoGrid", {
srcType : "dom",
srcData : "demoTable",
allowGridResize : true,
allowColumnResize : true,
allowClientSideSorting : true,
allowSelections : true,
allowMultipleSelections : true,
showSelectionColumn : true,
onColumnSort : onColumnSort,
onResizeGrid : onResizeGrid,
colAlign : gridColAlign,
colBGColors : ["#fafafa"],
colSortTypes : gridColSortTypes,
fixedCols : 1
});
})(this, this.document);
</script>
<div id="demoGrid">
<table id="demoTable">
<colgroup><col class="demoTableCol1"></colgroup>
<thead>
<tr>
<th class="tg-031e">見出し</th>
<th class="tg-031e">タイトル01</th>
<th class="tg-031e">タイトル02</th>
<th class="tg-031e">タイトル03</th>
<th class="tg-031e">タイトル04</th>
<th class="tg-031e">タイトル05</th>
<th class="tg-031e">タイトル06</th>
<th class="tg-031e">タイトル07</th>
<th class="tg-031e">タイトル08</th>
<th class="tg-031e">タイトル09</th>
<th class="tg-031e">1001</th>
<th class="tg-031e">1002</th>
<th class="tg-031e">1003</th>
<th class="tg-031e">1004</th>
<th class="tg-031e">1005</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-031e">横タイトル01</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル02</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル03</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル04</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル05</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル06</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル07</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル08</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル09</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル10</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル11</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル12</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル13</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル14</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル15</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル16</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル17</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル18</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル19</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル20</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル21</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル22</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル23</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル24</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル25</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル26</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル27</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル28</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル29</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
<tr>
<td class="tg-031e">横タイトル30</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
<td class="tg-031e">○</td>
</tr>
</tbody>
</table>
</div>
/* #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 に最初に表示されました。
]]>投稿 特定のチェックボックスをチェックすると、さらに追加で項目を表示します は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="form.js"></script>
//選択されたら表示
$(function(){
var selectlabel = $("label.select");
var selectitem = $("label.select input");
var morearea = $(".mod_search_table_more");
var moreinput = $(".mod_search_table_more input");
//初期化
$(moreinput).attr("checked", false);
$(morearea).css("display", "none");
$(selectlabel).click(function(){
if($(selectitem).prop('checked')){
$(morearea).slideDown();
}else{
$(moreinput).attr("checked", false);
$(morearea).slideUp();
}
});
});
<div class="mod_search"> <form action="" method=""> <div class="mod_search_table" id="search"> <table> <tbody><tr> <th scope="row"> 地域 </th> <td class="area"> <label><input type="checkbox" value="1" name="category_1"> 北海道・東北</label> <label><input type="checkbox" value="1" name="category_6"> 関東</label> <label><input type="checkbox" value="1" name="category_8"> 甲信越・北陸</label> <label><input type="checkbox" value="1" name="category_2"> 東海</label> <label class="select"><input type="checkbox" value="1" name="category_3"> 関西</label> <label><input type="checkbox" value="1" name="category_10"> 中国</label> <label><input type="checkbox" value="1" name="category_7"> 四国</label> <label><input type="checkbox" value="1" name="category_5"> 九州・沖縄</label> </td> </tr> </table> <div class="mod_search_table_more"> <table> <tr> <th scope="row"> 都道府県</th> <td> <label><input type="checkbox" value="1" name="area_1"> 大阪</label> <label><input type="checkbox" value="1" name="area_2"> 京都</label> <label><input type="checkbox" value="1" name="area_3"> 兵庫</label> <label><input type="checkbox" value="1" name="area_4"> 奈良</label> <label><input type="checkbox" value="1" name="area_5"> 和歌山</label> <label><input type="checkbox" value="1" name="area_6"> 滋賀</label> </td> </tr> </table> <!-- /mod_search_table_more --></div> <table> <tr> <th scope="row"> カラー </th> <td class="color"> <label> <input type="checkbox" value="1" name="color_1"> ホワイト</label> <label><input type="checkbox" value="1" name="color_2"> ブラック</label> <label><input type="checkbox" value="1" name="color_3"> ブルー</label> <label><input type="checkbox" value="1" name="color_4"> レッド</label> <label><input type="checkbox" value="1" name="color_5"> イエロー</label> <label><input type="checkbox" value="1" name="color_6"> グリーン</label> </td> </tr> </tbody></table> <!-- /mod_search_table --></div> </form> <!-- /mod_search --></div>
.mod_search form {
margin: 0 0 100px 0;
background-color: #FFFFFF;
border-bottom: 1px solid #999999;
border-top: 2px solid #999999;
}
.mod_search form label{
cursor:pointer;
}
.mod_search form input{
vertical-align:middle;
}
.mod_search form table {
width: 100%;
}
.mod_search form table th,
.mod_search form table td{
border-bottom: 1px solid #999999;
}
.mod_search form table th {
padding: 20px;
width:20%;
font-weight:bold;
color:#000;
vertical-align: top;
}
.mod_search form table td {
padding: 20px;
width:80%;
vertical-align: top;
}
.mod_search form table td.area label {
float: left;
margin: 0 0 5px 0;
width: 25%;
}
.mod_search form table td.color label {
margin:0 20px 0 0;
}
/* mod_search_table_more */
.mod_search_table_more label{
margin:0 20px 0 0;
}
投稿 特定のチェックボックスをチェックすると、さらに追加で項目を表示します は CodingMania に最初に表示されました。
]]>投稿 jqueryで表・テーブルのデータ・行を抽出・表示します。 は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/datatable.js"></script>
$(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;
});
});
<div class="mod_datatable">
<ul>
<li class="mod_LabelAll" style="width:200px;"><a href="#tbl_top">すべて表示する</a></li>
</ul>
<ul class="mod_koumokulist">
<li>1930年</li>
<li>1931年</li>
<li>1932年</li>
<li>1933年</li>
<li><a class="1934" href="#1934">1934年</a></li>
<li><a class="1935" href="#1935">1935年</a></li>
<li><a class="1936" href="#1936">1936年</a></li>
<li><a class="1937" href="#1937">1937年</a></li>
<li><a class="1938" href="#1938">1938年</a></li>
<li>1939年</li>
<li><a class="1950" href="#1950">1950年</a></li>
<li>1951年</li>
<li><a class="1952" href="#1952">1952年</a></li>
<li><a class="1953" href="#1953">1953年</a></li>
<li><a class="1954" href="#1954">1954年</a></li>
<li><a class="1955" href="#1955">1955年</a></li>
<li><a class="1956" href="#1956">1956年</a></li>
<li><a class="1957" href="#1957">1957年</a></li>
<li><a class="1958" href="#1958">1958年</a></li>
<li><a class="1959" href="#1959">1959年</a></li>
</ul>
<table id="tbl_top">
<tr class="1934" id="1934">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1934">
<td>1934年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1934">
<td>1934年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1934">
<td>1934年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1935" id="1935">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1935">
<td>1935年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1935">
<td>1935年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1935">
<td>1935年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1936" id="1936">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1936">
<td>1936年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1937" id="1937">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1937">
<td>1937年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1938" id="1938">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1938">
<td>1938年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1950" id="1950">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1950">
<td>1950年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1950">
<td>1950年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1952" id="1952">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1952">
<td>1952年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1952">
<td>1952年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1953" id="1953">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1953">
<td>1953年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1953">
<td>1953年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1953">
<td>1953年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1954" id="1954">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1954">
<td>1954年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1955" id="1955">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1955">
<td>1955年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1955">
<td>1955年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1955">
<td>1955年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1955">
<td>1955年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1955">
<td>1955年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1956" id="1956">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1956">
<td>1956年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1956">
<td>1956年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1957" id="1957">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1957">
<td>1957年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1957">
<td>1957年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1957">
<td>1957年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1957">
<td>1957年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1957">
<td>1957年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1957">
<td>1957年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958" id="1958">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1958">
<td>1958年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959" id="1959">
<th scope="col">年</th>
<th scope="col">項目1</th>
<th scope="col">項目2</th>
<th scope="col">項目3</th>
<th scope="col">備考</th>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
<tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr> <tr class="1959">
<td>1959年</td>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>備考欄なのでいろいろ詳細が入ります</td>
</tr>
</table>
<!--mod_datatable_end--></div>
/* リスト部分 */
.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表のデザインを変える は CodingMania に最初に表示されました。
]]><div class="mod_hyou_001"> <table summary=""> <tr> <th scope="row">見出し</th> <td>説明文章が入ります。</td> </tr> <tr> <th scope="row">見出し</th> <td>説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。</td> </tr> <tr> <th scope="row">見出し</th> <td>説明文章が入ります。<br /> 説明文章が入ります。</td> </tr> <tr> <th scope="row">見出し</th> <td>説明文章が入ります。</td> </tr> </table> <!--mod_hyou_001_end--></div>
.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 に最初に表示されました。
]]>