よくあるテーブルのヘッダ固定の1つ

業務アプリを作っているとテーブルのヘッダを固定して欲しいという話はよくある。よくありすぎる。

2つのテーブルを作って列の幅を固定して、body担当テーブルはdivで囲って overflow-y 程度でできればいいんだけど、IEはスクロールバーを出しっぱなしなのでずれる。

仕方なくheader担当にもスクロールバーをだしっぱなすとかまあ色々苦労する。

今回は、ページの上部にヘッダが来たらそこでheader担当を固定させてやればいいよね。ということでやってみた。

	(function() {
	'use strict';
	angular.module('app').directive('fixedOnTop', function($window) {
	return {
	restrict: 'A',
	link: function($scope, element, attrs) {
	angular.element($window).on('scroll', function() {
	var baseTop = element.get(0).offsetTop;
	if (angular.element(this).scrollTop() >= baseTop) {
	element.addClass('fixed-on-top');
	element.width(angular.element('#' + attrs.fixedOnTop).width());
	} else {
	element.removeClass('fixed-on-top');
	element.width('100%');
	}
	});
	}
	}
	});
	}());

view raw angular-directive.js hosted with ❤ by GitHub

	.fixed-on-top {
	position: fixed;
	top: 98px;
	}

view raw fixed-on-top.css hosted with ❤ by GitHub

	<div>
	<table id="table-header" fixed-on-top="table-body">
	<!-- header cells -->
	</table>
	<table id="table-body">
	<!-- data cells -->
	</table>
	</div>

view raw fixed-on-top.html hosted with ❤ by GitHub

	$(function() {
	var baseTop = $('#table-header').get(0).offsetTop;
	$(window).on('scroll', function() {
	if ($(this).scrollTop() > baseTop) {
	$('.header').addClass('fixed-on-top');
	} else {
	$('.header').removeClass('fixed-on-top');
	}
	});
	});

view raw jquery.js hosted with ❤ by GitHub

AngularJS の directive でやったけど、参考にした jQuery も備忘録的にメモっておいた

Bootstrapのpanelなんかの中にあった場合、固定した瞬間にはみ出て横幅がずれるので、body担当の横幅に合わせられるようにしている。

本当は thead に設定して1つのテーブルでやりたかったんだけどどうしても幅指定が出来なくて仕方なくテーブルを分けた。

横幅やスクロール距離、固定位置などパラメータは要件次第だけど結構手軽にできるもんだな

お使いの起動ディスクは一杯です

作業中に「お使いの起動ディスクは一杯です」というダイアログが表示された。

	# parallels のログ削除
	$ sudo rm /Library/Logs/parallels.*
	# homebrew の不要ファイル削除
	$ brew cleanup
	# キャッシュの削除
	$ sudo rm -dfR /System/Library/Caches/* /Library/Caches/* ~/Library/Caches/*

view raw get_mac_space.sh hosted with ❤ by GitHub

この3つのコマンド走らせるだけで、30Gほど空きスペースを確保できた。

ちょっと放置し過ぎか