横に長いテーブルを横にスライド

テーブルをページに設置するとき、文字数の関係でレイアウトが崩れてしまうことが

たとえば以下のような感じです。

A	B	C	D	E	F	G
テキストテキストテキストテキストテキストテキストテキスト	テキストテキストテキスト	テキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト	テキストテキスト	テキストテキストテキスト	テキスト

それをテーブルの全体の横幅を保持しつつ、横にスクロールし全体が見られるようにすると以下のようになります。

このようにすると、意外と見やすくなることも。

毎回調べて実装していたのですが、面倒なのでメモとして実装方法を残しておこうと思います。

コード例

HTML

<div class="custom-scroll-wrap">
<div class="custom-scroll-hint">
<span class="custom-scroll-hint-text">&#x2194; 横にスクロールできます（PCは表の上でドラッグ可）</span>
</div>

<div class="custom-scroll-area">
<table>
<thead>
<tr>
<th width="14%">A</th>
<th width="14%">B</th>
<th width="14%">C</th>
<th width="14%">D</th>
<th width="14%">E</th>
<th width="14%">F</th>
<th width="14%">G</th>
</tr>
</thead>
<tbody>
<tr>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
<td>テキストテキストテキスト</td>
<td>テキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキスト</td>
<td>テキスト</td>
</tr>
</tbody>
</table>
</div>
</div>

CSS

<style>
.custom-scroll-wrap {
position: relative;
width: 100%;
margin: 0 0 20px 0;
}

.custom-scroll-hint {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: inline-block;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
font-size: 13px;
line-height: 1.4;
border-radius: 999px;
pointer-events: none;
white-space: nowrap;
opacity: 1;
transition: opacity 0.3s ease;
}

.custom-scroll-hint.is-hidden {
opacity: 0;
}

.custom-scroll-area {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
cursor: grab;
}

.custom-scroll-area.is-dragging {
cursor: grabbing;
user-select: none;
}

.custom-scroll-area table {
min-width: 1200px;
}

.custom-scroll-area::-webkit-scrollbar {
height: 10px;
}

.custom-scroll-area::-webkit-scrollbar-thumb {
background: #999;
border-radius: 999px;
}

.custom-scroll-area::-webkit-scrollbar-track {
background: #e5e5e5;
}

@media screen and (max-width: 767px) {
.custom-scroll-hint {
font-size: 12px;
padding: 7px 12px;
}

.custom-scroll-area {
cursor: auto;
}

.custom-scroll-area table {
min-width: 1000px;
}
}
</style>

Javascript

<script>
document.addEventListener("DOMContentLoaded", function () {
var areas = document.querySelectorAll(".custom-scroll-area");

areas.forEach(function (area) {
var hint = area.parentElement.querySelector(".custom-scroll-hint");
var isMouseDragging = false;
var startX = 0;
var startScrollLeft = 0;
var moved = false;

function hideHintIfScrolled() {
if (!hint) {
return;
}

if (area.scrollLeft > 20) {
hint.classList.add("is-hidden");
} else {
hint.classList.remove("is-hidden");
}
}

area.addEventListener("scroll", hideHintIfScrolled, { passive: true });

area.addEventListener("mousedown", function (e) {
if (window.matchMedia("(pointer: coarse)").matches) {
return;
}

if (e.button !== 0) {
return;
}

isMouseDragging = true;
moved = false;
startX = e.pageX;
startScrollLeft = area.scrollLeft;
area.classList.add("is-dragging");
});

area.addEventListener("mousemove", function (e) {
if (!isMouseDragging) {
return;
}

e.preventDefault();
var walk = e.pageX – startX;

if (Math.abs(walk) > 3) {
moved = true;
}

area.scrollLeft = startScrollLeft – walk;
});

function endMouseDrag() {
isMouseDragging = false;
area.classList.remove("is-dragging");
}

area.addEventListener("mouseup", endMouseDrag);
area.addEventListener("mouseleave", endMouseDrag);

area.addEventListener("dragstart", function (e) {
e.preventDefault();
});

area.querySelectorAll("a").forEach(function (link) {
link.addEventListener("click", function (e) {
if (moved) {
e.preventDefault();
moved = false;
}
});
});

hideHintIfScrolled();
});
});
</script>

ちなみに「エクセルからテーブルタグに変換させるツールはこちら」です。