表の名前の見た目をキャプションっぽくするのを支援するUserScript

https://gyazo.com/f2aa9b9c1efd341f0111ef6dc1a3ef8e

table:表の名前がキャプションに見える

何かしらタイトル 何かしら見出し こんな

AAAA BBBB CCCCC

DDDD EEEE FFFFF

table:幅が狭い時でもちゃんと表の名前が表示される

a ii uuu

e o ka

実装

code:script.js

(() => {

const applyTableTitleCentering = () => {

const starts = document.querySelectorAll(".table-block-start");

starts.forEach((start) => {

const titleBlock = start.closest(".table-block");

const titleLine = start.closest(".line");

if (!titleBlock || !titleLine) return;

let maxWidth = 0;

let line = titleLine.nextElementSibling;

while (line && line.classList.contains("line")) {

if (line.querySelector(".table-block-start")) break;

const tableBlock = line.querySelector(".table-block");

const cells = line.querySelectorAll(".table-block .cell");

if (!tableBlock || cells.length === 0) break;

const width = tableBlock.getBoundingClientRect().width;

if (width > maxWidth) maxWidth = width;

line = line.nextElementSibling;

}

if (maxWidth > 0) {

// --- ここから追加：タイトルの自然幅（折り返さない場合の幅）を計測 ---

// 一旦スタイルをリセットして、nowrap で測る

const prevWhiteSpace = start.style.whiteSpace;

const prevDisplay = start.style.display;

start.style.whiteSpace = "nowrap";

start.style.display = "inline-block";

const titleNaturalWidth = start.getBoundingClientRect().width;

// 元に戻す（このあと改めて設定するので一旦クリア）

start.style.whiteSpace = prevWhiteSpace;

start.style.display = prevDisplay;

// --- ここまで追加 ---

// 表の幅とタイトルの自然幅の大きい方を採用

const finalWidth = Math.max(maxWidth, Math.ceil(titleNaturalWidth));

titleBlock.style.display = "inline-block";

titleBlock.style.boxSizing = "border-box";

titleBlock.style.maxWidth = "100%";

titleBlock.style.textAlign = "center";

start.style.display = "inline-block";

start.style.maxWidth = "100%";

start.style.boxSizing = "border-box";

// タイトルが表より長い場合は改行されない、短い場合は従来通り

start.style.whiteSpace = "nowrap";

start.style.overflowWrap = "normal";

}

});

};

let timer = null;

const schedule = () => {

clearTimeout(timer);

timer = setTimeout(applyTableTitleCentering, 100);

};

window.addEventListener("load", schedule);

window.addEventListener("resize", schedule);

const observer = new MutationObserver(schedule);

observer.observe(document.body, {

childList: true,

subtree: true,

characterData: true,

});

schedule();

})();

(() => {

const applyTableTitleCentering = () => {

const starts = document.querySelectorAll(".table-block-start");

starts.forEach((start) => {

const titleBlock = start.closest(".table-block");

const titleLine = start.closest(".line");

if (!titleBlock || !titleLine) return;

let maxWidth = 0;

let line = titleLine.nextElementSibling;

while (line && line.classList.contains("line")) {

if (line.querySelector(".table-block-start")) break;

const tableBlock = line.querySelector(".table-block");

const cells = line.querySelectorAll(".table-block .cell");

if (!tableBlock || cells.length === 0) break;

const width = tableBlock.getBoundingClientRect().width;

if (width > maxWidth) maxWidth = width;

line = line.nextElementSibling;

}

if (maxWidth > 0) {

titleBlock.style.display = "inline-block";

titleBlock.style.boxSizing = "border-box";

titleBlock.style.maxWidth = "100%";

titleBlock.style.textAlign = "center";

start.style.display = "inline-block";

start.style.maxWidth = "100%";

start.style.boxSizing = "border-box";

start.style.whiteSpace = "normal";

start.style.overflowWrap = "anywhere";

}

});

};

let timer = null;

const schedule = () => {

clearTimeout(timer);

timer = setTimeout(applyTableTitleCentering, 100);

};

window.addEventListener("load", schedule);

window.addEventListener("resize", schedule);

const observer = new MutationObserver(schedule);

observer.observe(document.body, {

childList: true,

subtree: true,

characterData: true,

});

schedule();

})();

hr.icon