Cryptact レイアウト　stylus style JS　Tampermonkey

/* テーブルの列幅を自動調整して見切れないようにする */
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; /* 必要に応じて調整 */
}

// ==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チェック
})();