#この記事のまとめ
DataTableにstyle指定をかぶせて見た目を調節しようとする記事です。Qiita初投稿なので読みづらかったりQiitaの規範とか従うべき慣習に則っていなかったりしたら指摘してあげてください。
スタートはここ↓で
ゴールはここ↓です。
#本文
##DataTableとは
DataTableは、テーブル<table>を良い感じにデータグリッドぽく表示してくれるjQueryのplug-inです。データソースとしてjsonを利用できるほか、外観については標準のDataTablesのスタイル適用の他、BootstrapやjQueryUIのものを適用することができて、絞り込みやソートもできるしサクサク動き、いわゆる「ラクに良い感じに仕上がる」ので使ってみています。
使い方や概要についてはこちらやこちらの記事で勉強させて頂きました。
##やりたいこと
スタイルの適用方法はいくつか用意されてるものの、列幅なんかは列ごとに指定する方法があるものの、テーブル全体のレイアウトについてはDataTablesの方で勝手に行の高さや色を決めてしまうので、いまいち自分のイメージ通りのデザインにならない、Optionにそう言ったレイアウト系の指定はほとんどない、と言うのがあり、変更するにはスタイルを上書きして調整するしかないみたいです。
###標準だとこんな感じ
###変更したいポイント
今回はこれの行の高さと色を変更します。
具体的にはちょっと1行の高さがありすぎるのでちょっと詰めつつ、奇数行と偶数行の色を変更して視認性を高めたいと思います。
##方法、手順
指定しているstyleをID指定で上書きします。DataTablesダウンロード時に指定したスタイルが標準のDataTablesのものであるかjQueryUIであるかBootstrapであるかによって多少記述内容を変更しなければならないところもありますが、今回はDataTables標準スタイルについて記述します。
###対象のhtml
対象のテーブルを<table id="table1">として表示するデータはjsonファイルを適当に取得するものとします。またDataTablesのバージョンは1.10.16です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>DataTablesのテスト</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="./s2.css"/>
<script>
$(function(){
//表示言語を日本語にする
$.extend($.fn.dataTable.defaults, {
language: {
url: "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json"
}
});
//DataTablesの初期設定処理
$("#table1").DataTable({
ajax: { url: "山手線.json", dataSrc: 'station_l' },
columns: [
{ data: "station_cd" },
{ data: "station_name" }
]
});
});
</script>
</head>
<body>
<header>
<h1>DataTablesのサンプル</h1>
</header>
<article>
<h2>テストのテーブル</h2>
<table id="table1" class="mytable">
<thead>
<tr>
<td>駅コード</td>
<td>駅名</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</article>
<footer>
</footer>
</body>
</html>
###行の高さを変更する
#table1 thead td{
padding-top: 1px;
padding-bottom: 1px;
}
#table1 tbody td{
padding-top: 1px;
padding-bottom: 1px;
}
これで見た目がこんな感じに縦がすっきりしました。
###行の色を変更する
/* 行の高さを変更する */
#table1 thead td{
padding-top: 1px;
padding-bottom: 1px;
}
#table1 tbody td{
padding-top: 1px;
padding-bottom: 1px;
}
/* 行の色を変更する */
#table1 thead tr{
background-color: #CCCCCC;
}
#table1 tbody tr.odd{
background-color: #FFFFFF;
}
#table1 tbody tr.even{
background-color: #EEEEEE;
}
ぐっと見やすくなりました。
###罫線を引く
/* 行の高さを変更する */
#table1 thead td{
padding-top: 1px;
padding-bottom: 1px;
}
#table1 tbody td{
padding-top: 1px;
padding-bottom: 1px;
}
/* 行の色を変更する */
#table1 thead tr{
background-color: #CCCCCC;
}
#table1 tbody tr.odd{
background-color: #FFFFFF;
}
#table1 tbody tr.even{
background-color: #EEEEEE;
}
/* 罫線を引く */
#table1 thead td:first-child{
border-left: 1px solid #404040;
}
#table1 thead td{
border-top: 1px solid #404040;
border-right: 1px solid #404040;
}
#table1 tbody td:first-child{
border-left: 1px solid #404040;
}
#table1 tbody td{
border-right: 1px solid #404040;
}
##完成