2025-02-27 CryptactのWEB版のレイアウトを変更。
Cryptact表示用でブラウザを分けるか。Operaでも使うことにしよう。
レイアウトを変えるからね。
Grok3さんと相談して作成。
要は表が見切れる。→Stylusで変更。
/* テーブルの列幅を自動調整して見切れないようにする */
table {
table-layout: auto !important;
word-wrap: break-word !important;
white-space: normal !important;
}
/* テキストを折り返して表示する */
td, th {
white-space: normal !important;
word-break: break-word !important;
}
/* 長いテキストをスクロール可能にする場合 */
td {
overflow-x: auto !important;
max-width: 200px; /* 必要に応じて調整 */
}
見出しが見えなくなって不便 → Javascriptで対応（Tampermonkey）
// ==UserScript==
// @name Cryptact Fixed Header
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Fix table header on scroll for Transactions page only
// @author You
// @match https://grid.cryptact.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function createFixedHeader() {
const currentUrl = location.href;
const isTransactionsPage = currentUrl.startsWith('https://grid.cryptact.com/transactions/');
// Transactionページ以外で既存ヘッダーを削除
if (!isTransactionsPage) {
const existingHeader = document.querySelector('.fixed-header');
if (existingHeader) {
existingHeader.remove();
console.log('Removed fixed header on non-Transactions page:', currentUrl);
}
return;
}
const table = document.querySelector('.table--hoverable');
if (!table) {
console.log('Error: .table--hoverable not found');
return;
}
const thead = table.querySelector('thead tr');
if (!thead) {
console.log('Error: thead tr not found within .table--hoverable');
return;
}
console.log('Found thead! Creating fixed header on Transactions page.');
const existingHeader = document.querySelector('.fixed-header');
if (existingHeader) existingHeader.remove();
const fixedHeader = thead.cloneNode(true);
fixedHeader.className = 'fixed-header';
fixedHeader.style.position = 'fixed';
fixedHeader.style.top = '140px';
fixedHeader.style.backgroundColor = '#f0f0f0';
fixedHeader.style.zIndex = '10';
const tableRect = table.getBoundingClientRect();
fixedHeader.style.left = tableRect.left + 'px';
fixedHeader.style.width = tableRect.width + 'px';
document.body.appendChild(fixedHeader);
fixedHeader.style.display = 'none';
function syncWidths() {
const ths = thead.querySelectorAll('th');
const fixedThs = fixedHeader.querySelectorAll('th');
const tbodyRows = table.querySelectorAll('tbody tr');
const tds = tbodyRows[0] ? tbodyRows[0].querySelectorAll('td') : [];
fixedThs.forEach((th, index) => {
if (tds[index]) th.style.width = getComputedStyle(tds[index]).width;
});
fixedHeader.style.left = table.getBoundingClientRect().left + 'px';
fixedHeader.style.width = table.getBoundingClientRect().width + 'px';
}
syncWidths();
window.addEventListener('resize', syncWidths);
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
fixedHeader.style.display = scrollTop > 200 ? 'table-row' : 'none';
syncWidths();
});
}
// 初回実行とページ変更検知
setTimeout(() => {
createFixedHeader();
}, 5000); // 5秒待機
let lastUrl = location.href;
setInterval(() => {
if (lastUrl !== location.href) {
lastUrl = location.href;
setTimeout(() => {
createFixedHeader();
}, 5000); // 5秒待機
console.log('URL changed, recreated fixed header.');
}
}, 500); // 0.5秒ごとにURLチェック
})();
